当我尝试在React中更改状态不变的方式时,它正在更改状态,然后再调用setstate,这使我困惑了三天。

这是我在onClick事件中调用的方法:

share = (indexFolder) => {
    console.log(this.state.folderInfo);
    const updateFolderInfo = [...this.state.folderInfo];
    updateFolderInfo[indexFolder].isProcessing = false;

    //state**is already changed**strong text** when console **
    console.log(this.state.folderInfo);

    this.setState({
            folderInfo : updateFolderInfo,
    })
    // the setState call do not take effect here
}


这是执行方法的地方:

<Folder key={folder._id}
        sharing={this.state.folderIsProcessing}
        folder={folder}
        delete={() => this.delete(index)}
        share={() => this.share(index)} />
//I'm passing share function as props in here ^ , and use it on
//click event in the Folder component .


有什么建议为什么会这样吗?

最佳答案

这里的问题是,通过执行const updateFolderInfo = [...this.state.folderInfo];可以有效地制作folderInfo的浅表副本。

这意味着,如果您在updateFolderInfo内修改任何对象或数组的项,那么您还将在原始folderInfo数组内修改相同的对象/数组。

假设folderInfo内仅包含JSON,以下是使用JSON.stringifyJSON.parse创建深层副本的潜在解决方案:

share = indexFolder => {
  const updatedFolderInfo = JSON.parse(JSON.stringify(this.state.folderInfo));
  updatedFolderInfo[indexFolder].isProcessing = false;

  this.setState({ folderInfo : updatedFolderInfo });
}


这是一个小示例,以简化的方式向您展示您目前正在做什么:

array1 = [{id: 1}, {id: 2}, {id: 3}]
array2 = [...array1]

array2[0].id = 100

array2
// [{id: 100}, {id: 2}, {id: 3}]

array1
// [{id: 100}, {id: 2}, {id: 3}]


您可以找到有关浅克隆与深克隆here的更多信息。

关于javascript - React:为什么在调用setState之前尝试以不可变的方式更改状态时更改状态,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51419488/

10-10 00:20