Reactjs React useEffect将加载组件两次

我在加载容器组件时遇到一些问题。组件从API获取数据，然后通过props将数据发送到无状态组件。我面临的问题是容器组件装载两次。第一次加载时数据为空，第二次加载时数据在那里。当无状态组件在没有任何数据的情况下加载时，我遇到了一个错误，因为它需要数据。我在我的代码中放了一个if语句来检查数据是否被加载，这是否有效，但我想知道是否有不使用if语句的方法来完成这项工作

我正在使用redux、redux thunks和axios

容器组件

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

//只有在有数据时才加载组件
if（空（道具物品））{
返回null；
}
返回(
);
};

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

---

此处确实需要条件渲染<代码>使用效果未加载组件两次。首先，组件自行加载，没有任何数据；在这里，您可以显示数据加载消息或微调器。第一次加载后，

useffect

运行，数据开始从API加载。加载程序在此阶段仍然可见。加载数据后，组件将使用实际数据重新渲染。现在，隐藏加载程序并显示数据。您的

PostPopularSection

组件可以根据其

道具的值来处理此问题。您必须将
道具
（特别是
文章
和
加载文章
）添加到
使用效果
的依赖项列表中。您尝试了这一点，仍然得到相同的错误。我想我将不得不使用条件渲染。
  // only load the component when we have data
  if (isObjectEmpty(props.article)) {
    return null;
  }
  return (
    <>
      <Section>
        <PostPopulairSection articles={props.popularArticles} />
      </Section>
    </>
  );
};