在 React 中使用 useState 更新多个数组对象值

Question

感觉我已经令人沮丧地接近解决这个问题，但不确定如何使用 useState 更新给定对象数组中的所有值。下面是一个示例：

const [data, setData] = useState([
{key: 1,
value: 25},
{key: 2,
value: 30}
])

然后假设单击按钮我想将数组中每个项目的值加 10：

const handleClick = () => {
const newData = data.map(item => item.value + 10)
setData ([
...data, ???
])

newData 提供了一个更新的数组，但我不确定如何使用 Hook 来更新状态。谢谢！

Answer 1

您可以使用functional state updater并返回映射的结果。另请注意，由于每个值都是一个对象，因此您必须仅克隆和更新值字段

const handleClick = () => {
setData (prevData => data.map(item => ({...item, value: item.value+10})));
}

用你的方式说，它会像

const handleClick = () => {
const newData = data.map(item => { 
return {...item, value: item.value + 10}
});
setData(newData);
}

Answer 2

应将数据设置为映射迭代的结果。它应该是这样的：

const handleClick = () => {
const newData = data.map(item => item.value + 10)
setData(newData)
}