当道具从父项更改时，我的子组件复选框没有更新？

Question

这是来自我的父组件 TodoList 的代码：

_handleSelectedTodo(e) {
    e.preventDefault(); 
    this.setState({checkedIds: [...this.state.checkedIds, e.target.value]});
  }
//render() { ...
  <ul>
    {todos.map((todo,todoIndex) => 
      <Todo
        key={todo.id}
        {...todo} // pass all the todo property
        onClick={() => onTodoClick(todo.id)}
        onTrashClick={() => onDeleteClick(todoIndex)}
        handleSelectedTodo = {this._handleSelectedTodo}
        checked={(this.state.checkedIds.includes(todo.id))}
      />
    )}
  </ul>

检查Todo组件中的复选框时，我在鸟类组件状态上添加CheckedIds。您可以在我使用的待办事项上的已检查道具上看到包含将其设置为真或假。但我的问题是我的子组件没有更新，我正在使用 componentWillReceiveProps。这是代码：

constructor(props){
    super(props);
    this.state= { checked: false }
  }

  componentWillReceiveProps(nextProps) {
  this.setState({ checked: nextProps.checked });  
}
// render() { ...
<input
   checked={this.state.checked}
   onChange={handleSelectedTodo}
   type="checkbox"
   value={id}
></input>

一切正常，当点击时，React 调试器上的检查为真，但它不会重新呈现，只有当我选中另一个框时才会重新呈现，我检查的最后一个将被选中，而不是最新的？

Answer 1

您需要删除this.state.checkedIds.includes(todo.id) 周围的()。

//render() { ...
  <ul>
    {todos.map((todo,todoIndex) => 
      <Todo
        key={todo.id}
        {...todo} // pass all the todo property
        onClick={() => onTodoClick(todo.id)}
        onTrashClick={() => onDeleteClick(todoIndex)}
        handleSelectedTodo = {this._handleSelectedTodo}
        checked={this.state.checkedIds.includes(todo.id)}
      />
    )}
  </ul>