如何强制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 
}