在 React.js 中更新 useState 数组的特定变量（按其位置）？

Posted 2023-02-22

【中文标题】在 React.js 中更新 useState 数组的特定变量（按其位置）？

【英文标题】：Update a specific variable of a useState array (by its place) in React.js?

【发布时间】：2021-07-10 18:13:25

【问题描述】：

在我的 React.js 功能组件中，我只需要更新 useState array 的变量之一：

let [nums, setNums] = React.useState([0,0,0])

到这里：

let [nums, setNums] = React.useState([0,1,0])

不更改其他变量（例如：setNums(nums[1] = 1)）。

这可能吗？

谢谢！

【问题讨论】：

如果以下答案有用，请单击其左侧的点赞按钮 (▲)。如果有人回答了您的问题，请单击复选标记 (✓) 接受它（一旦系统允许）。这样其他人就知道你已经（充分地）得到了帮助。另见What should I do when someone answers my question?

【参考方案1】：

您可以使用spread syntax 创建浅拷贝，并在复制的数组上使用index 设置新值：

const update = (index, value) => 
  const copy = [...nums]  // Create a copy
  copy[index] = value     // Set new value
  setNums(copy)

请注意，上述方法不会改变原始数据。 演示：

const nums = [0, 0, 0]

const copy = [...nums]
copy[1] = 100

console.log(nums, copy)

PS：在这种情况下实际上不需要使用map() 函数，因为我们已经知道应该更新哪个index 值。

【参考方案2】：

可能使用数组中元素的索引。

const handleChange = (targetIndex)=>
setState(nums.map(element, index) => if(targetIndex === index) return updated; return element);