如何在 React 中更改处于状态的数组元素

Question

我正在尝试使用 handleToggle 方法更改数组的元素，但出现错误，我做错了什么，为什么我总是要在 React 中返回一个新数组？

子组件：

    function Todolist(props) {
      const todoItem = props.todos.map((todo, index) =>
        <ListItem key={todo.id} dense button>
          <ListItemIcon>
            <Checkbox checked={todo.completed} onChange={props.onChange(todo.id)} edge="start"/>
          </ListItemIcon>
          <ListItemText primary={todo.title} />
          <ListItemSecondaryAction>
            <IconButton edge="end" aria-label="comments"></IconButton>
          </ListItemSecondaryAction>
        </ListItem>
      )
      return (
        <div>
          {todoItem}
        </div>
      )
    }

父组件：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      todos: [
        {
          title: 'Learn React',
          id: Math.random(),
          completed: true
        }
      ]
    }
  };

  handleChange = (evt) => {
    this.setState({
      value: evt.target.value
    })
  };

  handleSubmit = (evt) => {
    evt.preventDefault();

    const todos = [...this.state.todos];

    todos.push({
      title: this.state.value,
      id: Math.random(),
      completed: false
    });

    this.setState(state => ({
      todos,
      value: ''
    }))
  };

  handleToggle = (id) => {
    const todos = [...this.state.todos];

    todos.map(todo => {
      if (todo.id === id) {
        return todo.completed = !todo.completed
      } else {
        return todo
      }
    });

    this.setState(state => ({
      todos
    }))
  };

  render() {
    return (
      <div className="App">
        <Grid className="Header" justify="center" container>
          <Grid item xs={11}>
            <h1 className="Title">My to-do react app</h1>
            <FormBox value={this.state.value} onSubmit={this.handleSubmit} onChange={this.handleChange}/>
          </Grid>
        </Grid>
        <TodoList todos={this.state.todos} onChange={this.handleToggle} />
      </div>
    );
  }
}

错误文本：

已超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

Answer 1

你正在立即执行onChange

onChange={props.onChange(todo.id)}

将回调包装在arrow function中

onChange={() => props.onChange(todo.id)}

您的 handleToggle 也没有正确更改值（变异），请尝试这样

handleToggle = (id) => {
    const todos = [...this.state.todos];

    this.setState({ todos : todos.map(todo => ({
         ...todo, 
         completed : todo.id === id ? !todo.completed : todo.completed
     }) }))
  }