我尝试使用 handleChange 方法更改负责检查框的 completed 布尔值,但它没有更改.. 我找不到它错过的地方
class App extends React.Component {
constructor() {
super()
this.state = {
todos: todosData
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(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
这是我的 ToDoItem 组件
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
答案 0 :(得分:1)
你正在改变你的状态对象。当你不返回新的对象引用时,React 不会认为值是不同的,并且会使用更新的值重新渲染。
ApiResult.Error<BaseClass>(Error.DefaultError)
您还需要浅复制您正在更新的任何嵌套状态。
if (todo.id === id) {
todo.completed = !todo.completed // <-- state mutation!
}
return todo // <-- same todo object reference