时间戳

首页 > 解决方案 > 更改对象中值的状态，对象数组中的索引处，对象内的状态？

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

问题描述

我正在使用 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 上搜索一个类似的线程，这无疑是存在的，但找不到任何东西。我希望你能在这里帮助我！

先感谢您！

标签： javascriptreactjsreact-hooks

解决方案

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

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

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

它本质上映射到prev.requirements并且如果它找到已知索引，它会替换/修改该对象，否则它返回prevRequirementfrom 数组

推荐阅读