2

我正在关注一个 React 初学者教程，以制作一个 todo 应用程序为例。

在 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

TodoItem.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

它成功显示列表，控制台日志正确显示单击的复选框，但是，复选框不会更改。谁能告诉我这个问题？

4

1 回答 1

5

我认为您遇到了导致一些意外行为的状态突变问题。这样做的原因是因为在你if statement内部map你没有返回你修改的数组项，你实际上是在修改你的状态数组和你的新数组。

如何修复：在 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但它被更改为false我们map()想要避免的之后。通过以正确的方式返回我们的数组项，我们可以避免这种情况。

为了更好地理解什么是状态突变以及如何避免检查这个。

于 2020-09-20T11:10:01.383 回答