提问人：Himanshu Sardana 提问时间：11/5/2023 更新时间：11/6/2023 访问量：47
React 在循环遍历 JSON 对象数组时不渲染组件
React not rendering components while looping through array of JSON objects
问：
所以我基本上有一个 JSON 对象数组，我试图遍历并在屏幕上呈现，但是它似乎不起作用，React 没有任何错误
let quizCards = [];
fetch("/api/get-all-quiz")
.then((response) => response.json())
.then((JSONResponse) => {
console.log(JSONResponse["message"][0].name);
for (let i = 0; i <= JSONResponse["message"].length + 3; i++) {
quizCards.push(
<Card w="200%" h="100%">
<Flex>
<Flex direction={"column"}>
<Text>Hello</Text>
</Flex>
</Flex>
</Card>
);
}
});
这里是对象数组，但是卡片组件似乎没有被渲染JSONResponse['message']
我已经添加了我希望显示它们的位置，但是它似乎不起作用，而且当我手动添加卡片（没有遍历JSON对象）时，它似乎可以工作，但我希望这是动态的{quizCards}
答：
0赞
Krzysztof Krzeszewski
11/6/2023
#1
不应将组件保持在状态中。除了使用状态并将值加载为副作用的一部分之外，您还可以将 fetch 语句重构为单独的惰性组件。
const Lazy: React.FC = React.lazy(() => {
return fetch("/api/get-all-quiz")
.then((response) => response.json())
.then((JSONResponse) => {
const quizCards = [];
for (let i = 0; i <= JSONResponse["message"].length + 3; i++) {
quizCards.push(
<Card w="200%" h="100%">
<Flex>
<Flex direction="column">
<Text>Hello</Text>
</Flex>
</Flex>
</Card>
);
}
return {default: () => (<>{quizCards}</>)}
})
.catch((error) => ({default: () => (<>{error}</>)}));
});
然后将它与 Suspense 一起使用，您可以在其中定义在等待请求响应时要显示的内容。
const Parent: React.FC = () => {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<Lazy />
</React.Suspense>
)
}
评论
1赞
AKX
11/6/2023
或者可以使用像 swr 等这样的数据获取钩子，但重点是：没有组件处于状态！
评论