Reactjs 正在复制和不引用REACT中的状态对象

尝试创建状态对象的副本，对其进行更改，然后使用setState（）进行设置

但是，我无法复制对象，而是创建了一个引用。也就是说，当我编辑它时，我直接编辑state对象，这意味着setState（）不会重新渲染，因为从编辑对象到尝试运行setState（）时，实际上没有任何更改

我已经能够用一个数组来实现这一点，它包含在下面的代码中

// This is my state
interface IEditPanelState {
    currentFiles: SearchResults;
    newFiles: File[];
}


// This is my function
   public async cacheFiles(files: File[]) {
        // This works
        let cachedFiles = [...this.state.newFiles];
        // This is creating a reference. How to copy Searchresults??
        let currentFiles = this.state.currentFiles;
    
        for(let file of files) {
          cachedFiles.push(file);
          currentFiles.PrimarySearchResults.push({
            Title: file.name
          });
        }

        console.log(currentFiles);
        console.log(cachedFiles);
        console.log(this.state.newFiles);

        this.setState({
            newFiles: cachedFiles,
            currentFiles: currentFiles
        });
   } 

---

你能解释一下对国家进行深度克隆背后的主要需求吗？在阵列大小增加的情况下，它可能无法执行，而且可能是不必要的

另外，由于您的新状态依赖于前一个状态，因此如果您遵循那里的函数约定，可能会有所帮助。像下面这样

//这具有从当前状态提取当前文件的逻辑
const getCurrentFiles=（currState）=>{…}；
常量缓存文件=（文件）=>{
this.setState（（当前状态）=>{
const currentFiles=getCurrentFiles（currentState）；
返回({
新文件：[…currState.currentFiles，…files]，
当前文件
});
})
}

---

链接到

setState

功能约定的文档-

这已由@SarangPM作为注释回答

答案如下：

---

让currentFiles=this.state.currentFiles将始终创建引用。对于浅拷贝，可以使用扩展运算符；对于深克隆，可以使用lodash的深克隆功能

我安装了lodash，出现了一些问题，但最终解决了它。请查看下面我的评论

我只是用npm安装的。它说使用：
import{{{}从“lodash”导入
但是，这会导致以下错误：
只能通过打开“esModuleInterop”标志并使用默认导入来导入。编辑：nvm，我使用：
import{cloneDeep}从'lodash'导入它

感谢@SarangPM回答了我的问题，解决了我的问题。
我加上这个作为回答，因为@SarangPM没有

如果您想复制对象，那么您可以像
{…this.state.currentFiles}
让currentFiles=this.state.currentFiles将始终创建引用。对于浅拷贝，您可以使用扩展运算符；对于深克隆，您可以使用lodash中的深克隆函数。@PriyankKachhela-我刚刚尝试过这个，但我不能使用“currentFiles.PrimarySearchResults”。我收到一条错误消息：“类型{}上不存在属性'PrimarySearchResults'。@SarangPM-我会查看一下this@SarangPM-我不确定如何进口lodash。我只是用npm安装的。它说使用：
import{{{}从“lodash”导入
但是，这会导致以下错误：
只能通过打开“esModuleInterop”标志并使用默认导入来导入“\”。
编辑：nvm，我使用：
从“lodash”导入{cloneDeep}非常感谢！你能插入你的评论作为答案吗，这样我就可以将这个问题标记为已解决？我需要以各种方式编辑数组。将项添加到currentFiles，这是一种SearchResults类型，意味着它有一个PrimarySearchResults数组。所以要访问这个，我需要克隆搜索结果。不过，你的建议可能会奏效。我没有试过。阵列的大小不会增长太多，因为我认为用户最多不需要链接10个文件。我确实使用了SarangPM关于CloneDeep的建议。这是有道理的，但你仍然不应该理想地需要深度克隆。感谢你让我知道-如果我有时间进行优化，我会研究你提供的解决方案