反應 setState 不更新復選框選中狀態

Question

我正在關注 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

它成功顯示列表，控制台日志正確顯示單擊的復選框，但是，復選框不會更改。 誰能告訴我問題？

Answer 1

我認為您遇到了導致一些意外行為的狀態突變問題。 這樣做的原因是因為在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 。 通過以正確的方式返回我們的數組項，我們可以避免這種情況。

為了更好地了解什么是狀態突變以及如何避免檢查這一點。