提问人：jNiuk 提问时间：11/17/2023 更新时间：11/17/2023 访问量：24
对接受 API 调用的组件做出反应悬念？
React suspense for component that takes an API call?
问：
我希望根据 API 调用呈现标头。在 API 返回数据之前，它是未定义的。我的渲染图如下所示：
const LazyHeader = async () => {
const data = await fetchCampaignHeaderData({ client });
return <CampaignHeader data={data} />;
};
<Suspense fallback={<SkeletonHeader />}>
<LazyHeader />
</Suspense>
这有效，尽管我收到 4 个关于错误请求 （400） 和无效 JSON 的错误。如果我将其切换到 useEffect 和 useState 的旧方法，则不会出现这些错误。旧方法：
useEffect(() => {
(async () => {
Promise.all([fetchCampaignHeaderData({ client })]).then(async (data) => {
const header = data[0];
setDataHeader(header); // useState variable
setLoading(false); // useState variable
});
})();
}
{ loading ? <SkeletonHeader /> : <CampaignHeader data={dataHeader} /> }
答：
0赞
natashap
11/17/2023
#1
这始终是一个很好的做法，React 推荐的方法，使所有 API 调用都包含在 useEffect 钩子中。
请尝试以下操作：
const LazyHeader = () => {
const [data, setData] = useState();
useEffect(async () => {
const data = await fetchCampaignHeaderData({ client });
setData(data[0]);
}, []);
return <CampaignHeader data={data} />;
};
评论
0赞
jNiuk
11/17/2023
这是行不通的。现在，我收到一个递归错误，指出我的数据未定义。
0赞
natashap
11/17/2023
请使用数据类型 data[0]（空对象或数组或字符串）初始化 useState
0赞
jNiuk
11/17/2023
同样的事情。我收到 1000 个错误
0赞
natashap
11/17/2023
您是否使用惰性方法导入组件？如果可能，请分享错误截图
评论
fetchCampaignHeaderData