使用 setState 更新复杂的 object

Question

我有数据数组，只想在用户单击按钮时更新：

const [visualQuerryData, setVisualQuerryData] = useState([{
  default: {
    default: [{
      class: '',
      property: ''
    }],
    and: [],
    or: [],
  },
}]);

在此我只想更新默认 object 内部的 class 密钥

我做了什么：

setVisualQuerryData((p) => [
  ...p,
  (visualQuerryData[0].default.default[i].class = e),
]);

我得到的是什么 output：

[{
    default: {
      and: []
      default: [{
        class: 'shanum',
        property: ''
      }],
      or: [],
    }
  },
  "shanum"
]

什么是实际 output：

[{
  default: {
    default: [{
      class: 'shanum',
      property: ''
    }],
    and: [],
    or: [],
  },
}]

我不知道为什么最后相同的数据添加了我想在 class 键中添加的内容？

Answer 1

您可以使用Immer通过produce function 使 state 修改更容易。 Immer 获取currentQueryState并返回一个副本，即draft state，因此您不会改变原始 state。 这使得 state 更新更具可读性。

import produce from 'immer';

// Where `e` and `i` are defined in the current stacktrace...

setVisualQuerryData((currentQueryData) =>
  produce(currentQueryData, (draft) => {
    draft[0].default.default[i].class = e;
  })
);

不要忘记安装依赖项：

npm install immer

Answer 2

const onChange = (e) => {
// object copy
 const nextValue =  {...visualQuerryData};

// change value
 nextValue[0].default.default[i].class = e;
// update value 
setVisualQuerryData(nextValue)
};