在 React Hook 中，如何更改 useState 数组的特定值？

Question

  let [_value, setValue] = useState([1, 2, 3, 4, 5, 1, 2, 3, 4, 5 ]);

在这段代码中，如果我想更改 _value[3] 如何使用 setValue 更改值？

在我的项目中，单击（评级）按钮时，我必须更改 _value[index] 。

所以我必须动态改变_value[index]。

如果你知道答案，请告诉我。 谢谢！

Answer 1

在 React 中，您需要返回一个新的 state 数组引用。 您可以通过将之前的 state 映射到下一个 state 来实现这一点，使用索引进行匹配，当索引匹配时返回新值，否则返回当前值。

const updateByIndex = (newValue, index) => {
  setValue(values => values.map((value, i) => i === index ? newValue: value);
};

Answer 2

通常有几种方法可以更新 JavaScript 中的 arrays。 重要的是，无论你做什么，你都要确保你不会改变现有的state 。

一种方法是制作数组的浅拷贝，改变拷贝，并设置新的 state：

function update(index, newValue) {
  // shallow copy
  const newArray = [..._value];
  // mutate copy
  newArray[index] = newValue;
  // set state
  setValue(newArray);
}

另一种选择是map在数组上，当索引与所需索引匹配时返回新值。

function update(index, newValue) {
  const newArray = _value.map((v, i) => {
    if (i === index) return newValue;
    return v;
  });
  setValue(newArray);
}