使用 React Hooks 的 setter，如何在组件渲染之前设置数据？

Question

我将一个名为Products的JS对象导出到这个文件中，只是为了在构建/测试时替换一个真正的API调用。我想将函数的状态设置为对象，但已映射。我有一个看起来像这样的组件：

function App() {
const [rooms, setRooms] = useState([]);
const [days, setDays] = useState([]);
const roomsMapped = products.data.map(room => ({
id: room.id,
title: room.title
}))
useEffect(() => {
setRooms(roomsMapped);
})
return ( etc )

这将返回以下错误：Error: Maximum update depth exceeded。

我觉得我错过了一些非常明显的东西，但我对React和Hooks还很陌生。如何在组件渲染之前设置此数据？

Answer 1

只需将其声明为rooms的初始值

const Component = () =>{
const [rooms, setRooms] = useState(products.data.map(room => ({
id: room.id,
title: room.title
})))
}

您还可以使用惰性初始状态来避免在每个渲染上重新处理初始值

const Component = () =>{
const [rooms, setRooms] = useState(() => products.data.map(room => ({
id: room.id,
title: room.title
})))
}

Answer 2

将useEffect更改为此

useEffect(() => {
setRooms(roomsMapped);
},[])

Answer 3

使用Lazy initialisation作为useState的参数

import React, { useState } from "react";
function App() {
const [rooms, setRooms] = useState(() => {
// May be a long computation initialization
const data = products.data || [];
return data.map(({ id, title }) => ({ id, title }));
});
return (
// JSX stuffs
)
}

Answer 4

您可以为此使用默认道具。设置空列表的初始值。

Answer 5

由于useEffect函数没有依赖数组，您将得到"错误：超过了最大更新深度"。解决这个问题的最佳方法是将空数组作为第二个参数传递给像这样的useEffect:

useEffect(() => {
setRooms(roomsMapped);
},[]) <= pass empty array here 

这将阻止组件重新渲染，如果你想让组件在道具更改时重新渲染，你可以像这样传递数组中的道具：

useEffect(() => {
setRooms(roomsMapped);
},[props.props1,props.props2])

在这里你可以传递任意多的道具。。。