React useEffect两次加载组件

Question

加载容器组件时遇到一些问题。该组件正在从API提取数据，然后通过prop将数据发送到无状态组件。我面临的问题是容器组件加载了两次。第一次加载时，数据为空，第二次加载时，数据在那里。当加载无状态组件而没有任何数据时，我得到了一个错误，因为它正在等待数据。我在代码中放置了一个if语句，用于检查是否已加载数据并且此方法有效，但是我想知道是否存在不使用if语句的方法。

我正在使用redux，redux thunk和axios。

容器组件

  useEffect(() => {
    // load articles only once
    if (isObjectEmpty(props.article)) {
      props.loadArticles().catch(error => {
        console.log("Loading articles failed" + error);
      });
    }
  }, []);

  // only load the component when we have data
  if (isObjectEmpty(props.article)) {
    return null;
  }
  return (
    <>
      <Section>
        <PostPopulairSection articles={props.popularArticles} />
      </Section>
    </>
  );
};

我从无状态组件得到的错误： Error