时间戳

首页 > 解决方案 > 如何使用钩子更改数组的状态？

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

问题描述

我不知道它到底是什么，但我在尝试使用钩子对数组进行最简单的状态更新时遇到了无数问题。

我发现唯一可行的方法是使用 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()

我想知道我是否遗漏了一些重要的东西，或者关于如何使用钩子处理数组的一些很棒的提示和技巧。如果需要更多信息，请随时询问。谢谢。

标签： javascriptarraysreactjsreact-hooks

解决方案

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

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

目前尚不清楚您遇到了什么样的问题，但上面的修复将使您免于linksArray.

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

推荐阅读