在 React 中使用 useState 钩子将数组插入状态答案

【问题标题】：Insert an array into state using useState hook in React在 React 中使用 useState 钩子将数组插入状态
【发布时间】：2023-03-14 12:05:01
【问题描述】：

我是 React 的新手。尝试使用功能组件中的useState() 钩子将数据数组插入到变量中。当我这样做时，我收到了这个错误

Expected 1 arguments, but got 0 or more.ts(2556)

代码

const data = [{
  title: 'React',
  'description': 'State in React'
}, {
  title: 'Angular',
  'description': 'Introducing Typescript'
}]

const [posts, setPosts] = useState([]);

setPosts(data)

有人可以帮忙吗？

【问题讨论】：

如果您希望posts 以这样的方式开始，只需执行const [posts, setPosts] = useState(data);
哇，成功了！但是，为什么不能按照上面的方式设置呢？@ChrisG
您需要提供正确的minimal reproducible example；但我认为您不应该像这样在组件函数中删除setX 语句。我还建议先使用类，以学习所有基础知识。如果您是 React 初学者，Hooks 可能会非常困难。
您可能有 react-dom 和 react 依赖项的冲突版本。确保它们是相同的版本。

标签： javascript reactjs typescript ecmascript-6

【解决方案1】：

我根据您的代码制作了一个简单的功能组件“Home”，它可以正常工作。代码如下：

import React, { useState } from 'react'

const Home = () => {
  const [posts, setPosts] = useState([])
  const data = [
    {
      title: 'React',
      description: 'State in React'
    },
    {
      title: 'Angular',
      description: 'Introducing Typescript'
    }
  ]

  return (
    <div>
      <button type="button" onClick={() => setPosts(data)}>
        Data
      </button>
      <div>
        Data from State:
        {posts.map((obj) => {
          return <div key={obj.title}>{obj.title}</div>
        })}
      </div>
    </div>
  )
}

export default Home

如果这个回答对你有帮助，请点赞。

【讨论】：