更改对象中值的状态，在对象数组中的索引处，在对象中？

Question

我正在使用 React 并尝试使用 setState 钩子来更新嵌套对象中的值，正如您从标题中所理解的那样😅

我设法让它在某种程度上工作，但不是获得我以前拥有的原始对象数组，而是获得一个索引对象作为我的返回值。

所以我正在使用的对象看起来像这样：

{
 category: ""
 level: ""
 name: ""
 rarity: ""
 requirements: [ {name: "", customValue: 0 <--- that I wish to update }, {name: "", customValue: 0 }]
}

当我试图更新这个值的状态时，我设法把它归结为这个。 属性的索引是已知的。

setItemUpdated((prev) => ({
  ...prev,
  requirements: { ...prev.requirements, [idx]: { ...prev.requirements[idx], customValue: val } },
}));

这在某种程度上是有效的。 但不是 [ {}, {} ] 我得到 [ 1:{} 2:{} ]。 我明白为什么我会得到这个，因为我将第一个要求设置为一个对象，但是，当我尝试用数组包装内部时，我永远无法编译任何东西。 我真的不知道它的语法是怎样的。

我试图在 SO 上搜索类似的线程，这无疑是存在的，但找不到任何东西。 我希望你能在这里帮助我！

先感谢您！

Answer 1

目前我自己实际上正在使用类似的东西，我正在做的过程是复制状态数据，根据输入（在您的情况下称为 prev）进行编辑。 因为我刚刚看到这个问题，所以在这里抛出一个快速的潜在答案。

const data = { ...useStateData.data };
data[input.name] = input.value;

setUseStateData({ data});

因此，您可能需要执行以下操作：

data.requirements['name'] = updatedvalue;

希望有帮助 -

Answer 2

正如您已经提到的，您正在尝试在对象内传播一个数组，结果用数组的索引/值对填充对象。

我会做类似以下的事情（以不变的方式）：

setItemUpdated(prev => ({
  ...prev,
  requirements: prev.requirements.map((prevRequirement, index) => index === idx
    ? {...prev.requirements[idx], customValue: val}
    : prevRequirement
  ),
}));

它基本上映射了prev.requirements ，如果它找到已知索引，则替换/修改该对象，否则从数组返回prevRequirement

Answer 3

长手解决方案是简单地在索引前后对数组进行切片，并在索引处展开对象。

setItemUpdated((prev) => ({
  ...prev,
  requirements: [
    ...prev.requirements.slice(0, idx),
    { ...prev.requirements[idx], customValue: val },
    ...prev.requirements.slice(idx + 1),
  ],
}));