功能组件中的React生命周期问题(子组件中未定义数据)

Question

当我试图从父组件调用后端api时遇到了一个问题，调用结果在子组件中始终为null。以下是我的实现：父组件：

const Parent = () => {
const { loadFiData, fiData, year } = useContext(DashboardContext);
useEffect(() => {
let loading = true;

if (loading) loadFiData();
return () => (loading = false);
}, [year]);
return (
<div className="mt-5">
<Child />
</div>
);
};

子组件：

const Chart1 = () => {
const { fiData } = useContext(DashboardContext);
useEffect(() => {
if (fiData) {
console.log('there is a data');
} else {
console.log('there is no data');
}
}, []);
return (
<h1>Child</h1>
);
};

因此，我寻找一种方法来执行函数，该函数首先从父组件调用后端，以便子组件可以访问数据。

Answer 1

在Chart1/Child组件中添加fiData作为useEffect的依赖项。然后useEffect中的代码应该运行2次。它应该首先控制台there is no data，当请求在上下文中完成时，它应该控制台there is a data。

useEffect(() => {
if (fiData) {
console.log('there is a data');
} else {
console.log('there is no data');
}
}, [fiData]);