我正在尝试通过实现一个简单的待办事项应用程序来学习 react 和函数式编程。我没有使用 Flux,因为我只是想了解 parent 和 child 之间传递信息的概念。我试图在子级中的单击事件上触发父级中的函数。然而,我从 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;
非常感谢任何帮助/澄清!
这是错误:bundle.js:9139 警告:setState(...):无法在现有状态转换期间更新(例如在 render
或其他组件的构造函数内)。渲染方法应该是 props 和 state 的纯函数;构造函数副作用是一种反模式,但可以移至 componentWillMount
。
最佳答案
在 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> );
}
}
按照你现在的方式,你实际上是在调用 this.handleClick(this.props.todo)
因此,一旦组件呈现,它就会调用该函数,该函数会立即在父组件中设置状态这违背了 react 模式,也就是你没有在渲染方法中设置状态
关于javascript - React,纯函数警告?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39630195/