Question

我正在使用React Web应用程序，我的组件之一具有这样的结构状态：

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

通过单击按钮，应从状态中删除client-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结构化数据。

谢谢您的帮助。

Answer 1

您正在变异状态对象，它是big no-no in react。

您可以做的是destructure使对象超出状态（同时创建不带任何突变的新对象）。

并设置其余对象的状态：

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

当然，您将需要动态执行此操作，而不是对client2键进行硬编码。

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

class App extends React.Component {
  state = {
    clientList: {
      client1: { id: "client1" },
      client2: { id: "client2" },
      client3: { id: "client3" }
    }
  };

  deleteClient = () => {
    const { clientList } = this.state;
    //if you get the key you want to remove as a parameter:
    //const clientToRemove = "client2";
    //you can desstructure it out, example:
    //const { [clientToRemove]: removeMe, ...restOfClients} = clientList;

    // hardcoded client2 removal
    const { client2, ...restOfClients } = clientList;
    this.setState({ clientList: restOfClients });
  };

  render() {
    return (
      <div>
        <button onClick={this.deleteClient}>Delete</button>
        <div>{JSON.stringify(this.state.clientList)}</div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

Answer 2

我在这里有两种选择：

1。

this.setState({
     ...this.state,
     clientList: {
          ...this.state.clientList,
          client2: undefined     // <~~ I made it undefined
     }
})

2。

let clientList = {
    client1: this.state.client1,
    client3: this.state.client3       
}

this.setState({clientList})

尝试那些方法，然后选择一种适合您的解决方案。

Answer 3

删除数据后，我们将更新状态。如下，

this.setState({
  clientList : clientList 
});

这是我们更新状态的方式。尝试一下，希望它对您有用。：）

从状态副本删除数据后，React setState不起作用

3 个答案: