如何使用钩子更改数组的状态？

Question

我不确切知道它是什么，但是在尝试使用钩子对数组进行最简单的状态更新时遇到了无数问题。我发现唯一起作用的方法是使用useReducer对数组进行单个更新，并在onClick处理程序上进行分派。在我当前的项目中，我正在尝试嵌套在在表单提交上运行的函数中嵌套的for循环中更新数组状态。我尝试了许多不同的解决方案，但这只是我的尝试之一。  function sessionToState(session) {    let formattedArray = []    for (let i = 0; i < session.length; i++) {      formattedArray.push({ url: session[i] })      setLinksArray([...linksArray, formattedArray[i]])    }  }  // --------------------------------------------------------  return (    <div>      <form        method="post"        onSubmit={async e => {          e.preventDefault()          const session = await getURLs({ populate: true })          sessionToState(session)          await createGroup()我想知道是否有任何我想念的大事情，或者关于如何使用钩子处理数组的一些技巧和窍门。如果需要更多信息，请随时询问。谢谢。

Answer 1

在性能方面，您不应该调用setState每次迭代。您应该使用最终数组设置状态。

const sessionToState = (session) => {

  setLinksArray(

   session.map(sessionItem => ({url: sessionItem}))

  );

}

...或者如果您也想保留旧项目，则应使用setState内的函数进行操作...

const sessionToState = (session) => {

  setLinksArray(oldState => [

   ...oldState,

   ...session.map(sessionItem => ({url: sessionItem}))

  ]);

}

Answer 2

从嵌套函数调用中调用状态设置器时，应使用的函数更新形式setState。在您的情况下，它将是：

setLinksArray(linksArray => [...linksArray, formattedArray[i]])

目前尚不清楚您遇到什么样的问题，但是上述修复程序将使您免受意外状态的影响linksArray。

这也适用于任何状态，不仅适用于数组。