next.js 如何更新useState中数组值的状态，例如

7gyucuyw 于 2023-06-22 发布在其他

关注(0)|答案(3)|浏览(197)

我在nextjs中有一个useState，它的值如下所示：

const [sampleData, setSampleData] = useState({
     value1: ''
     value2: ''
     value3: []
   });

例如，如果我想更新value1的状态，同时保留其余的状态，我会这样做：

setSampleData({...sampleData, value1: 'new value'});

这是可行的。但是，如果我想更新value3的状态，它是一个数组，并且仍然保留以前的数组内容，我该如何实现这一点？这样做会将value3数组的整个状态替换为新的数组集：

setSampleData({...sampleData, value3: [new array]});

是否可能或者我应该完全使用另一种格式，例如useReducer hook？

next.js

来源：https://stackoverflow.com/questions/76421393/how-do-you-update-the-state-of-an-array-value-in-a-usestate-such-as-this

3条答案

按热度按时间

zpgglvta1#

您可以使用内部跨页，例如：

setSampleData({
  ...sampleData,
  value3: [...sampleData.value3, 'new value']
});

赞(0）回复(0）举报 2023-06-22

a64a0gku2#

现在你有一些选择来实现这一点，
选项1：

setSampleData({...sampleData, value3: [...sampleData.value3, newValue]});

选项2：

const temp = {...sampleData}
temp.value3.push(newValue)
setSampleData({...temp});

赞(0）回复(0）举报 2023-06-22

rfbsl7qr3#

为了向setter添加额外的逻辑，您还可以将回调函数传递给状态setter（* 而不仅仅是新状态 *）
你可以参考文档来阅读更多关于它的信息，但我想这应该对你的情况起作用。

setSampleData((prevSampleData) => {
  const newSampleData = {...prevSampleData};
  newSampleData?.value3.push("New Sample") // add your own logic here
  return newSampleData
});

这个回调的返回值就是被设置为新状态的值

赞(0）回复(0）举报 2023-06-22

我来回答

next.js 如何更新useState中数组值的状态，例如

3条答案

相关问题

热门标签

最新问答