状态更改后复选框不更改检查属性

Question

这是我正在使用的部分代码：

class FileItem extends Component {

  constructor(props) {
    super(props);

    // Initial state
    this.state = {
      hover: false,
      checked: false
    };

    this.pickFile = this.pickFile.bind(this);  

  }

  pickFile(e){
   e.stopPropagation();
   this.state.checked ? this.props.removeSelectedPaths(this.props.path) : this.props.addSelectedPaths(this.props.path);
  }

  //set the checked status for the checkboxes if file\folder are picked
  componentWillReceiveProps(nextProps){

   this.setState({checked: nextProps.selectedPaths.indexOf(this.props.path) != -1 });

 } 

 render(){

  return(          
      <div className='select-mode'><input id='files-select' type='checkbox'  checked={this.state.checked} onClick={this.pickFile}/></div>
  )

 }

这应该如何工作：

当您选择一个文件时，它应该设置其复选框的选中状态。当您使用 slect all files checkbox（它不在此处的代码中）时，它会将所有路径推送到 selectedPAths 数组中的 redux 状态，并且所有文件都应该在它们被选中时选中复选框。

组件结构：

1. 文件 - 容器连接到 redux 状态。将 props 发送到 FileList
2. FileList - 每个 FileItem 的哑组件包装器。向 FileItem 发送道具。
3. FileItem - 为特定文件呈现行的组件

问题：

问题是当我使用“选择所有文件”功能时，单个文件的复选框未更新 UI 以在复选框上显示复选标记。虽然逐个文件选择文件工作正常并且复选框更改为选中（但使用相同的逻辑来查看是否应该选中）。

奇怪的事实：

1. 当我这样做时 console.log(this.state.checked) 在渲染中它告诉我状态是 正确。所以它应该将复选框更改为选中但不是。
2. 我对 Select All files 复选框有类似的逻辑（它使用 componentWillReceiveProps 方法来检查是否所有文件都被选中并更改选中状态）并且它工作得很好。
3. 您可以显示选中所有文件后选中的复选框只是将其悬停在上面（这会触发鼠标输入事件并更改导致重新渲染的状态）。我感觉在状态改变后渲染会丢失，但奇怪的事实 1 告诉相反的事情，因为我们在状态中有 true，但在 UI 中没有选中复选框。

Answer 1

有时组件需要一个键，通常是在使用列表时。这对于检测更改很有用。试试这个：

<FileItem key={file.index.toString() + file.isChecked} path={filepath} checked={file.isChecked} />

我们说有变化时做出反应。重新渲染。

建议： 如果要处理所有项目的状态，则必须从父级传递选中的参数

files.map (file => 
     <fileItem key={file.key} path={filepath} checked={AllChecked} />

在 FileItem 处：

class FileItem extends Component {

  constructor(props) {
    super(props);

    // Initial state
    this.state = {
      hover: false,
      checked: props.checked// <= here
    };

    this.pickFile = this.pickFile.bind(this);  

  }