使用 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

抛出错误是因为您在构造函数中调用了 toggleTask。相反，请尝试在 componentDidMount 挂钩下调用它。有关 React 组件和生命周期的更多信息：https://facebook.github.io/react/docs/react-component.html

Answer 2

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

constructor(props){
    super(props);

    this.state = {
        toDos
    };

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

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

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

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

Answer 3

组件在 render 方法之后挂载 return。您正在尝试在组件初始化期间设置本地组件的状态（此时组件尚未完成 render 方法执行）。

试试这个...

constructor(props){
        super(props);

        this.state = {
            toDos
        };

        this.toggleTask = this.toggleTask.bind(this);
    }

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

setState warning in ToDo App using React

javascript

jsx

reactjs

react-jsx