Question

我具有以下数据结构：

        this.state = {
        client: {
            abilities: [],
        },
        abilitiesDisplay: [],

我正在尝试将客户端能力空数组的状态设置为aptsDisplay数组，该状态已在代码中进行了更改，现在有两项。

我的设置状态函数如下：

编辑：客户端和abilitiesDisplay在函数中更早地声明：

    const {
        client,
        abilitiesDisplay
    } = this.state;


           this.setState(() => ({
                client: {
                    ...this.state.client,
                    abilities: [
                        ...client.abilities,
                        abilitiesDisplay
                    ],
                }
            }))

在这种情况下，设置状态不起作用，client.abilities仍然为空数组。错误是否明显？

Answer 1

如果要将abilitiesDisplay数组的元素添加到client.abilities数组，则可以通过传播两个数组来创建一个包含两个数组中所有元素的新数组。

示例

class App extends React.Component {
  state = {
    client: {
      abilities: ["baz"]
    },
    abilitiesDisplay: ["foo", "bar"]
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState(previousState => ({
        client: {
          abilities: [
            ...previousState.client.abilities,
            ...previousState.abilitiesDisplay
          ]
        }
      }));
    }, 2000);
  }

  render() {
    return <div>{JSON.stringify(this.state)}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<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"></div>

Answer 2

尝试这个=）

this.setState((prevState) => ({
  client: { 
    abilities: [ ...this.prevState.abilitiesDisplay ]
  }
}));

我假设您不想通过上面的信息将旧值保留在能力中。

Answer 3

您需要this.state.abilitiesDisplay。

将一个数组的setState设置为另一个数组的值

3 个答案: