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
        })  
    }
}

除了我在我的控制台上收到警告之外，所有内容都按预期完美运行：

警告：setState（...）：只能更新已安装或安装的组件。这通常意味着您在已卸载的组件上调用了setState（）。这是一个无操作。请检查组件的代码。

我已在上述代码中标记了引发警告的行。

Answer 1

实际上警告是因为您从构造函数中触发setState，nl here

constructor(props){
    super(props);

    this.state = {
        toDos
    };

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

当您在构造函数中时，您的组件尚未安装。警告解释得非常好。

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

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

Answer 2

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

Answer 3

返回render方法后挂载

组件。您正试图在组件初始化期间设置本地组件的状态（此时组件尚未完成渲染方法执行）。

试试这个......

constructor(props){
        super(props);

        this.state = {
            toDos
        };

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

使用React在ToDo App中设置setState警告

3 个答案: