我的孩子组件复选框是在父母更改道具时未更新的

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>

当检查托多组件中的复选框时，我会在todolist组件状态下添加checkedids。您可以在我使用的检查道具上看到将其设置为True或False。但是我的问题是我的孩子组件没有更新，并且我正在使用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调试器上是正确的，但是它不会启用，仅当我选中另一个框时，它才会恢复，而我检查的最后一个框将被检查而不是最新的盒子？

<</p>

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>