如何强制useEffect等待，直到在其他组件中接收到数据

Question

我在网关组件中初始化用户数据，并通过redux存储将数据分发到其他组件。因此，如果用户直接转到其他组件，那么web应用程序就会崩溃。

我想确保其他组件等待执行useEffect，直到在主组件中完成初始化。

"props.places"是来自网关组件的一个->redux存储。如何强制它们等待初始化？

useEffect(() => {
//convert incoming data to props
console.log(props.places);
let convert = [];
for (const converted of props.places.results) {
convert.push({
lat: converted.coordinates.lat,
lng: converted.coordinates.lng,
});
}
setFacilities((facilities) => ({ ...facilities }, convert));
console.log(facilities);
}, [props.places]);

Answer 1

在useEffect中添加一些数据检查，并呈现其他内容，除非数据准备好：

function MyComponent(props) {
useEffect(() => {
if (props.places) {
// do something
}
}, [props.places]);
if (!props.places) return 'Waiting for places';
return ... // normal rendering 
}

Answer 2

function YourFunctionalComponentName(props) {
useEffect(()=>{
},[props.places]);
if (Object.keys(props.places).length>0){  // assuming props.places is an object
return ..your jsx} 
}