arrays - ReactJS setState 多维数组变量键在子数组中

Question

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

我知道我能做到

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

但我需要能够做到这一点

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

失败了。如何在不修改状态和替换整个内容的情况下修改子数组？

标签： arraysreactjssetstate

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
       }
    }
}));