单击复选框不会改变它

Question

我尝试使用 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

Answer 1

问题

你正在改变你的状态对象。当你不返回新的对象引用时，React 不会认为值是不同的，并且会使用更新的值重新渲染。

ApiResult.Error<BaseClass>(Error.DefaultError)

解决方案

您还需要浅复制您正在更新的任何嵌套状态。

if (todo.id === id) {
  todo.completed = !todo.completed // <-- state mutation!
}
return todo // <-- same todo object reference