javascript - 使用useState的旧值更新数组值

我敢肯定这是一个简单的问题，但我无法弄清楚。

const [rowLabels, setRowLabels] = React.useState(['','','','','',]);

我认为这会工作。但它不喜欢语法。

setRowLabels(oldValues => ([
  ...oldValues,
  oldValues[position]: event.target.value
])

我知道我可以在下面执行此操作，但我宁愿不要将rowLabels作为道具来避免重新渲染。有什么办法可以只用oldValues做到吗？

const rowLabelsCopy = [...rowLabels];
rowLabelsCopy[position] = event.target.value;
setRowLabels(rowLabelsCopy);

最佳答案

setState()函数接受您在第一次失败尝试中所演示的回调。该回调可以在第二次尝试中包含这些行，并允许您使用oldValues而不是rowLabels：

setRowLabels(oldValues => {
  const newValues = [...oldValues];
  newValues[position] = event.target.value;
  return newValues;
});

或者，如果您不想使用显式的返回，这是一个不太易读的替代方法：

setRowLabels(oldValues => Object.assign(
  [...oldValues],
  { [position]: event.target.value }
));