[英]React setState not updating checkbox checked state
我正在关注 React 初学者教程,以制作待办事项应用程序为例。
在 App.js 中,有一个 handleChange 方法会更新状态是否选中复选框,并将其传递给 TodoItem 组件
class App extends React.Component {
constructor() {
super()
this.state = {
todos: todosData
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(id) {
console.log(id)
this.setState(prevState => {
const updatedTodos = prevState.todos.map(todo => {
if (todo.id === id) {
todo.completed = !todo.completed
}
return todo
})
return {
todos: updatedTodos
}
})
}
render() {
const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item} handleChange={this.handleChange}/>)
return (
<div className="todo-list">
{todoItems}
</div>
)
}
}
export default App
待办事项.js
function TodoItem(props) {
return (
<div className="todo-item">
<input
type="checkbox"
checked={props.item.completed}
onChange={() => props.handleChange(props.item.id)}
/>
<p>{props.item.text}</p>
</div>
)
}
export default TodoItem
它成功显示列表,控制台日志正确显示单击的复选框,但是,复选框不会更改。 谁能告诉我问题?
我认为您遇到了导致一些意外行为的状态突变问题。 这样做的原因是因为在map
的if statement
,您没有返回修改后的数组项,而实际上是在修改状态数组和新数组。
如何解决:在 if 语句中返回修改后的数组项
this.setState(prevState => {
const updatedTodos = prevState.todos.map(todo => {
if (todo.id === id) {
return {
...todo,
completed: !todo.completed
}
}
return todo
})
return {
todos: updatedTodos
}
})
或者使用带有条件(三元)运算符的单行:
this.setState(prevState => ({
...prevState,
todos: prevState.todos.map(todo => todo.id === id ? { ...todo, ...{ completed: !todo.completed } } : todo)
}))
看看我在操场上创建的这个例子,以获得更好的理解:
我定义了两个数组,一个数组使用map()
而不返回,另一个数组使用map()
返回。
我们的目标是保持我们的两个数组完全相同,并使用map()
创建一个新的修改后的数组。 查看日志结果并注意我们的初始数组是如何被修改的。 我们在这个数组中的第二个待办事项应该有一个completed
的true
值,但是在我们想要避免的map()
之后它被更改为false
。 通过以正确的方式返回我们的数组项,我们可以避免这种情况。
为了更好地了解什么是状态突变以及如何避免检查这一点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.