如何使用 foreach 循环启动 React 钩子状态

Question

抱歉，如果之前有人问过这个问题，我不确定是不是这样。我来自 Java 背景并且是 React 的超级新手并且还不是很精通这个框架。但我想要做的是从一个数组中检索所有数据，以将其设置为另一个通过 useState 启动的数组。我不确定它的语法，因为我尝试通过它进行每个循环，但它不允许我这样做。

基本上，我想避免在此处进行这种硬编码，因为我的数据是动态的，来自 api:

 const [data, setData] = useState([

        {
            name: reports[0].title,
            runDate: reports[0].runDate,
            createdDate: reports[0].createdDate,
            category: reports[0].category.title,
            actions: 4, 
        },
        {
            name: reports[1].title,
            runDate: reports[1].runDate,
            createdDate: reports[1].createdDate,
            category: reports[1].category.title,
            actions: 4,
        },
    ]
)

非常感谢。

Answer 1

听起来您所需要的只是可以遍历 reports 数组并对其进行转换的东西：

// pass `reports` into this if you need to
const getInitialData = () => reports.map(report => ({
  name: report.title,
  runDate: report.runDate,
  createdDate: report.createdDate,
  category: report.category.title,
  actions: 4,
}));

const [data, setData] = useState(getInitialData);

（我正在将一个函数传递给 useState，因此您只需在装载时将报告转换为所需的数据结构，而不是在每次渲染时）

如何使用 foreach 循环启动 React 钩子状态

How to initiate React hook state with foreach loop

javascript

reactjs

react-hooks

use-state