React Native 使用setState更新复杂对象

nx7onnlm 于 2022-11-17 发布在 React

关注(0)|答案(2)|浏览(238)

我有一组数据，只要用户单击按钮，我就想更新：

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

这里我只想更新默认对象中的类键 *

我做了什么：

setVisualQueryData((p) => [
  ...p,
  (visualQueryData[0].default.default[i].class = e),
]);

我得到的输出：

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

什么是实际输出：

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

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

react-native

来源：https://stackoverflow.com/questions/73375154/update-complex-object-using-setstate

2条答案

按热度按时间

myss37ts1#

你可以使用Immer来修改状态，通过使用produce函数。Immer获取currentQueryState并返回一个副本，即draft状态，这样你就不会改变原始状态。这使得状态更新更容易读取。

import produce from 'immer';

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

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

不要忘记安装依赖项：

npm install immer

赞(0）回复(0）举报 2022-11-17

wvt8vs2t2#

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

    // change value
    nextValue[0].default.default[i].class = e;

    // update value 
    setVisualQueryData(nextValue)
};

赞(0）回复(0）举报 2022-11-17

我来回答

React Native 使用setState更新复杂对象

2条答案

相关问题

热门标签

最新问答