javascript - 使用 React 在 ToDo App 中设置状态警告

Question

我正在尝试使用 React 创建一个简单的 ToDo 应用，下面是我的 app.js 文件:

import React from 'react';
import { render } from 'react-dom'
import ToDoList from './toDoList'
import CreateToDos from './createToDos'
import _ from 'lodash'

let toDos = [
    {
        task: 'task 1',
        isCompleted: true
    },
    {
        task: 'task 2',
        isCompleted: false
    }
];

export default class App extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            toDos
        };

        this.toggleTask()
    }

    render(){
        return (
            <div>
                <h1>Todo App</h1>
                <CreateToDos updateToDoList={ this.updateToDoList.bind(this)}/>
                <ToDoList toDos={this.state.toDos}/>
            </div>
        );
    }

    updateToDoList(task) {
        toDos.push({
            task,
            isCompleted: false
        });
        this.setState({
            toDos
        })
    }

    toggleTask() {
        let updatedToDos = _.map(toDos, function(toDo){
            return _.assign(toDo, {
                task: toDo.task,
                isCompleted: toDo.isCompleted ? false : true
            })
        });
        this.setState({  // <<<<<<<<<<<<<<< Throwing Warning
            toDos: updatedToDos
        })  
    }
}

一切都按预期完美运行，除了我在控制台上收到一条警告:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the component.

我在上面的代码中标记了抛出警告的行。

Answer 1

实际上警告是因为你从你的构造函数中触发了 setState，这里是 nl

constructor(props){
    super(props);

    this.state = {
        toDos
    };

    this.toggleTask() // <- this line will call the setState
}

由于您在构造函数中，您的组件尚未安装。警告解释得很好。

您现在可以选择使用更合适的方法来处理一般状态

例如，您可以设置 getInitialState() 而不是设置 this.state = { toDos }。至于在安装时更新状态，您可以使用 componentDidMount()。