Reactjs 从状态副本中删除数据后，React setState不工作

我正在开发React web应用程序，我的一个组件具有如此结构化的状态：

state = {
    clientList : {
        client1 : { // some data },
        client2: { //some data },
        client3: { //some data }
    }
}

通过单击按钮，客户端2应从状态中删除。 以下是执行此操作的函数：

let clientList = {...this.state.clientList} 
// console.log(clientList) returns the whole state, as expected

delete clientList.client2  
// console.log(clientList) returns the updated state, client2 has been deleted, as expected

this.setState({ clientList })

但组件的状态不会更新。 有人能告诉我我做错了什么吗？我经常这样做状态更新，但这是我第一次使用

delete

方法

最后一件事：数据由Firebase提供，我无法更改de json结构化数据

---

谢谢你的帮助。

我这里有两个选择：

一,

---

尝试这些，然后选择一个适合您的解决方案。

删除数据后，我们可以更新状态。具体如下:

this.setState({
  clientList : clientList 
});

---

这就是我们更新状态的方式。试试这个，希望，它对你有用。：）

您正在修改state对象，它是一个

您可以做的是使对象脱离状态（同时创建没有变化的新对象）

并设置其余对象的状态：

const { client2, ...restOfClients } = clientList;
this.setState({ clientList: restOfClients });

当然，您需要动态地执行此操作，而不是硬编码

client2

键

这是一个正在运行的示例，请注意有关如何动态执行此操作的注释行

类应用程序扩展了React.Component{
状态={
客户名单：{
client1:{id:“client1”}，
client2:{id:“client2”}，
客户端3:{id:“客户端3”}
}
};
deleteClient=（）=>{
const{clientList}=this.state；
//如果获得要作为参数删除的密钥：
//const clientToRemove=“client2”；
//您可以将其分解，例如：
//const{[clientToRemove]：removeMe，…restofClient}=clientList；
//硬编码客户端2删除
const{client2，…restOfClients}=clientList；
this.setState（{clientList:restOfClients}）；
};
render（）{
返回(
删除
{JSON.stringify（this.state.clientList）}
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）

这个
this.setState（{clientList}）
不应该是
this.setState（{clientList:clientList}）
@kiranvj这是有效的，因为
es2015
看到这不是真的，没有区别。只是语法上的糖。这是有效的，因为
es2015
请参见您重新打开问题的原因？感谢您的回答，并指出我的错误做法。我尝试了硬编码的解决方案，
console.log（restOfClients）
返回预期的数据，但setState仍然不起作用。我还尝试使用一个动态参数，
console.log（restOfClients）
返回初始状态，不做任何修改。我仍然很困惑…当你说“但是设置状态仍然不工作”时，你有错误吗？你怎么知道它不起作用？再说一遍，你怎么知道它保持不变？好的，我在一个堆栈溢出代码片段中尝试了我的本地代码，它工作得很好。我将关闭此问题并将其标记为已解决：您的答案在我的应用程序之外工作。再次感谢你。
this.setState({
  clientList : clientList 
});

const { client2, ...restOfClients } = clientList;
this.setState({ clientList: restOfClients });