react.js 事件处理程序未返回更新的数据

Question

我是 react.js 的新手。我正在关注 youtube 上的视频以学习 react.js。我正在处理简单的事件处理并陷入了一些问题。当用户在复选框上执行 onclick 功能时，我想选中/取消选中该复选框。但不知何故，返回的数组没有更新，复选框是不可操作的。我在下面粘贴我的代码：

App.js

import React from 'react'
import Header from './components/Header'
import Todolist from './components/Todolist'
import todosData from './data/todosData'

class App extends React.Component {

  constructor(){
    super()
    this.state = {
      todos: todosData
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(id){
    this.setState(prevState => {
        console.log(prevState.todos)
        const updatedTodos = prevState.todos.map(todo => {
          if(todo.id === id){
            todo.completed = !todo.completed
          }
          return todo
        })
        console.log(updatedTodos)
        return{
          todos : updatedTodos
        }
    })
  }

  render(){
    const todoItems = this.state.todos.map(item => <Todolist key={item.id} item={item} handleChange={this.handleChange} />)
    return (
      <div>
        <Header />
        {todoItems}
      </div>
    )
  }

}

export default App;

TodoList.js

import React from 'react'

function Todolist(props){
    return(
        <div className='todo-item'>
            <input type='checkbox'
                   checked={props.item.completed} 
                   onChange={() => props.handleChange(props.item.id)} 
            />
            <span>{props.item.text}</span>
        </div>
        )
}

export default Todolist

Answer 1

您正试图在这一行改变数组的原始项目/对象！

todo.completed = !todo.completed

您可以尝试使用Object.assign 或使用spread 创建一个新对象。两者都很好，但传播方式更可取。

使用Object.assign

  handleChange(id) {
    this.setState((prevState) => {
      const updatedTodos = prevState.todos.map((todo) => {
        // Object.assign creates a new object!
        const changedTodo = Object.assign({}, todo, {
          completed: todo.id === id ? !todo.completed : todo.completed
        });

        return changedTodo;
      });
      return {
        todos: updatedTodos
      };
    });
  }

使用传播...

handleChange(id) {
    this.setState((prevState) => {
      const updatedTodos = prevState.todos.map((todo) => {
        const changedTodo = {
          ...todo,
          completed: todo.id === id ? !todo.completed : todo.completed
        };

        return changedTodo;
      });
      return {
        todos: updatedTodos
      };
    });
  }

Answer 2

如here 所述，setState 在strict mode 中运行两次。状态更新函数被调用两次，输入相同。这应该没问题并产生相同的输出。但这里的问题是您重用了todo 对象，而不是创建一个新对象。这反过来会导致completed 标志被翻转两次。

你可以改变你的更新函数，每次都创建一个新的 todo 对象：

this.setState(prevState => {
  const updatedTodos = prevState.todos.map(todo => {
    if (todo.id === id) {
      return {
        ...todo,
        completed: !todo.completed,
      };
    }
    return todo;
  });
  return {
    todos: updatedTodos,
  };
});