我在 componentDidMount 中加载数据，但每次渲染时都会加载数据，我该如何避免这种行为？答案

【问题标题】：I load the data in the componentDidMount but it loads the data every time it's rendered, how do I avoid that behavior?我在 componentDidMount 中加载数据，但每次渲染时都会加载数据，我该如何避免这种行为？
【发布时间】：2021-05-26 07:56:08
【问题描述】：

我不知道如何避免一个组件加载数据两次，我需要它加载一次数据，并且每次渲染时，我不希望它重新加载数据。

我把数据加载放在了componentDidMount中，但是每次渲染的时候都调用了数据加载

我能做什么？

我尝试在 redux 商店中使用布尔值，但没有成功

它没有发生，但经过几次更改后，它开始发生，我不知道原因你建议我怎么做？

提前致谢

拉斐尔

【问题讨论】：

该方法只在第一次挂载时触发，而不是每次重新渲染？可以分享一下这个问题的minimal reproducible example 吗？
如何添加更多代码？，这里的 cmets 不适合
加载数据是两次还是更多？
如果数据只加载了两次，可能是因为使用了。更多信息，here。如果不是这样，可能是由于在 CountryCard 组件中使用了 key 属性造成的。
不要在 cmets 中添加代码。编辑问题

标签： javascript reactjs react-native redux react-redux

【解决方案1】：

useEffect(() =>{}, []) 在我看来是她最简单的答案..

【讨论】：

【解决方案2】：

为防止多次加载数据，您可以先检查数据是否可用。如果是，请不要再次获取它。

   componentDidMount = () => {  
     if(this.props.countries && this.props.countries.length > 0) {
       // data is loaded, don't fetch it again
       return
     }
     // data not available, fetch it
     this.props.loadCountries()
   }

【讨论】：