Javascript 反应，纯功能警告？

我试图通过实现一个简单的todo应用程序来学习react和函数式编程。我不是在使用flux，因为我只是想了解在父母和孩子之间传递信息的概念。我试图在子对象中的单击事件上触发父对象中的函数。然而，我从React得到一个非常严重的错误，关于使用纯函数和状态。有人能解释一下我做错了什么，什么是正确的做事方式吗？我的功能有什么不纯之处，我看不到我正在产生的副作用。这是我的密码：

var React = require('react');
var Todo = require('./Todo');

const todos = [ {task: "Eat", completed: false},
            {task: "Breathe", completed: false},
            {task: "Sleep", completed: false}];

var TodoList = React.createClass({
    getInitialState: function() {
        return {todos: todos};
    },
    changeTodoStatus (task) {
        var updatedTodos = this.state.todos.map(function(todo){
            if (task.task === todo.task) {
                return {task: todo.task, completed: !todo.completed};
            } else {
                return todo;
            }
        });
        this.setState({todos: updatedTodos});
    },
    render: function() {
        var _that = this;
        return(
            <div className="container">
                <div className="row list-of-things">
                    <ul className="list-group">
                        {
                          this.state.todos.map( (todo, index) => {
                                return (<Todo clickHandler={ this.changeTodoStatus } key={index} todo={todo} />);
                            })
                        }
                    </ul>
                </div>
            </div>
        );
    }
});

module.exports = TodoList;

var Todo = React.createClass({
    handleClick( todo ){
        this.props.clickHandler( todo );
    },
    render: function() {
        if( this.props.todo.completed === true){
            return ( <li onClick={ this.handleClick(this.props.todo.task) } className="list-group-item list-group-item-success"><strike>{this.props.todo.task}</strike></li> );
        } else {
            return ( <li onClick={ this.handleClick(this.props.todo.task) } className="list-group-item"> {this.props.todo.task} </li> );
        }
    }
});

module.exports = Todo;

var React=require（'React'）；
var Todo=require（'./Todo'）；
const todos=[{task:“Eat”，completed:false}，
{任务：“呼吸”，已完成：false}，
{任务：“睡眠”，已完成：false}]；
var TodoList=React.createClass({
getInitialState:函数（）{
返回{todos:todos}；
},
变更状态（任务）{
var updatedTodos=this.state.todos.map（函数（todo）{
if（task.task==todo.task）{
返回{task:todo.task，已完成：！todo.completed}；
}否则{
返回待办事项；
}
});
this.setState（{todos:updatedTodos}）；
},
render:function（）{
var _=这个；
返回(

{
this.state.todos.map（（todo，index）=>{
返回（）；
})
}

);
}
});
module.exports=TodoList；
var Todo=React.createClass({
handleClick（待办事项）{
this.props.clickHandler（todo）；
},
render:function（）{
if（this.props.todo.completed==true）{
return（
{this.props.todo.task}
）；
}否则{
return（
{this.props.todo.task}
）；
}
}
});
module.exports=Todo；

非常感谢您的帮助/澄清

---

这是错误：bundle.js:9139警告：setState（…）：无法在现有状态转换期间更新（例如在

render

或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数；构造函数的副作用是一种反模式，但可以移动到

组件willmount

在用于todo的onclick处理程序中，实际上是调用这些函数而不是引用。我要做的是在您的Todo组件中：

handleClick() {
  this.props.clickHandler( this.props.todo );
{

在渲染中，只需执行以下操作

render: function() {
    if( this.props.todo.completed === true){
        return ( <li onClick={ this.handleClick } className="list-group-item list-group-item-success"><strike>{this.props.todo.task}</strike></li> );
    } else {
        return ( <li onClick={ this.handleClick } className="list-group-item"> {this.props.todo.task} </li> );
    }
}

render:function（）{
if（this.props.todo.completed==true）{
返回（
{this.props.todo.task}
）；
}否则{
return（
{this.props.todo.task}
）；
}
}

---

现在的方式实际上是调用

this.handleClick（this.props.todo）

因此，只要组件呈现，它就会调用在父组件中立即设置状态的函数，该函数与react模式相反，也就是说，您不会在呈现方法中将状态设置为

finalfreq

您还必须使用

this

---

Ahhh，这是因为我通过调用而不是引用创建了一个副作用，对吗？按照最初的操作方式，您基本上是说“渲染后立即运行此函数”，而您想要的是“我希望在运行时钟时运行此函数”无论何时添加括号，都表示希望函数的实际值，即执行函数与引用函数本身