如何在 react/redux 应用程序中正确获取数据？答案

【问题标题】：How to fetch data correctly in a react/redux app?如何在 react/redux 应用程序中正确获取数据？
【发布时间】：2019-08-01 08:16:23
【问题描述】：

我已经看到这个问题重复了很多次，但我正在尝试开发一个 react/redux 应用程序，每次我尝试在页面加载之前获取数据时都会遇到很多问题。我觉得问题是异步调用，看起来有时当我使用数据获取的数据结果时，商店还没有上传，所以我尝试访问未定义的变量，我得到了错误。

我尝试使用componentDidMount() 并从该方法内部触发获取数据并为我实现存储状态的操作。当我无法在 html 中直接使用数据时，我还尝试使用 componentDidMount() 和 componentWillReceiveProps(nextProps) 来使用数据。

所以问题在于，有时（并非总是）我想要获取的数据在我使用它时已经未定义。有没有办法避免这种情况？以及如何正确获取数据？

【问题讨论】：

【解决方案1】：

您是否尝试过使用 componentWillMount？您放入 componentWillMount 的所有内容都会在您的应用程序渲染之前执行，这与 componentDidMount 不同，您首先渲染您的应用程序，然后执行您放入的所有内容。

另外，你有没有看过 hooks 和 useEffect 函数？尝试研究钩子，因为它会解决许多具有标准生命周期函数的样板。

【讨论】：

不推荐使用 componentWillMount 吗？是的，我听说过钩子，但我肯定会读到更多。
是的，它已被弃用，抱歉。您仍然可以进行条件渲染。您可以将所有内容包装在返回函数中，以便在您从 fetch 获取某些内容时呈现。同时你可以做一些加载动画，这样用户就可以确定事情正在发生，他需要等待。但看看钩子。它们易于学习和理解，使用效果挂钩将解决您的问题。
componentDidMount 没问题。您是否使用react-redux 将您的状态值映射到组件的道具。
他甚至不必为此使用 Redux。 ContextAPI 非常好，它甚至有它的钩子。既然要学钩子，最好能发挥出最好的一面。