子数组中的ReactJS setState多维数组变量键

Question

我有一系列组件，每个组件都有组件详细信息，我正在尝试更新组件的详细信息。

我知道我可以做到

this.setState({
    component: {
       ...this.state.component,
       [var]: value
    }
});

但是我需要能够做到这一点

this.setState({
    component[key]: {
       ...this.state.component[key],
       [key2]: value
    }
});

失败。如何修改子数组而不修改状态并替换整个对象？

Answer 1

您还需要在组件状态下更新嵌套数据

this.setState({
    component: {
       ...this.state.component,
       [key]: {
          ...this.state.component[key],
          [key2]: value
       }
    }
});

但是，当您基于先前状态更新状态时，最好使用回调方法来更新状态

this.setState(prevState: ({
    component: {
       ...prevState.component,
       [key]: {
          ...prevState.component[key],
          [key2]: value
       }
    }
}));