如何使用 React 或 React Native 更新对象并使用新对象值设置状态答案

【问题标题】：How to update an object and set the state with new object values using React or React Native如何使用 React 或 React Native 更新对象并使用新对象值设置状态
【发布时间】：2021-11-30 09:28:10
【问题描述】：

我正在尝试更新存储在我的 useState 挂钩“项目”中的对象。代码块 1 不起作用，但代码块 2 起作用。我唯一做的就是将我的项目放入一个新变量中。有人可以解释为什么代码块 1 不起作用，但代码块 2 起作用。

不工作

const Users = () => {
  const [items, setItems] = useState('');

  const folder = {
    id: itemId,
    title: text,
    location: itemLocation,
  };

  // get object index
  const objIndex = items.findIndex(obj => obj.location === itemLocation);

  // update object
  items[objIndex] = folder;

  // set state with update
  setItems([...items]);
};

以下作品

const Users = () => {
  const [items, setItems] = useState('');

  const folder = {
    id: itemId,
    title: text,
    location: itemLocation,
  };

  // put state into variable
  const myItems = [...items]
  // get object index
  const objIndex = items.findIndex(obj => obj.location === itemLocation);

  // update object
  myItems[objIndex] = folder;

  // set state with update
  setItems(myItems);
};

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

items[objIndex] = folder;

你不应该像这样直接更新状态。 React 假设您总是使用“set”函数来更新您的状态，并且如果您直接修改状态，将不知道何时重新渲染您的组件。

https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly

【讨论】：

那么正确的方法是创建状态的副本然后进行更改，然后使用新副本设置状态
你在那里所做的似乎是合理的。我唯一担心的是为什么 setItems 不在回调或效果中，但我假设你还没有完成组件。

【解决方案2】：

  // update object
  items[objIndex] = folder;

我相信这是问题所在。实际上，我从未尝试更改状态本身（我一直认为它是只读的）。

稍后我将对此进行进一步测试以确定。但通常您不会直接编辑状态（状态表示items 变量）。您要么 1) 创建一个 items1，例如 items1 = { ...items }，然后是 setItems(items1[objIndex] = folder)，要么按照您在第二个代码 sn-p 中的方法。

【讨论】：