哪里是最好的地方加载数据从零售店?
我在我的父React组件中使用componentDidMount()方法从API中获取一些数据,然后将其保存在redux状态。哪里是最好的地方加载数据从零售店?
在我的渲染方法中,我有另一个组件应该使用来自全局的redux状态的数据。
我可以通过道具发送数据给我的子组件,或者我可以使用mapStateToProps()加载它们。
如果我尝试console.log或从我的子组件构造函数或componentDidMount()方法中的道具分配数据到VAR,我没有得到我所期望的数据(我得到初始状态)。
我的渲染方法中的Console.log会在第一次渲染时向我显示初始状态,第二次它会显示正确的数据。
我需要点,我确信我有正确的数据。
...其中var a = this.props.somethingFromState;将被正确分配。
渲染方法是最好的地方,通常做这个的最佳实践是什么。谢谢。
这里有几个问题。
关于何处加载数据,componentDidMount
确实是调用ajax方法并加载数据的正确位置,正如facebook docs所建议的。
关于是否通过道具将数据传递给子组件,我喜欢遵循presentational vs container components的Dan Abramov's(作者ofredx)guid。简而言之,尝试使用一个容器组件加载数据并执行所有逻辑,然后通过道具将所需的任何内容传递给表示组件,如果可能的话,使它们成为纯函数。
就您何时拥有正确的数据而言,请查看上面的React生命周期文档。您将看到constructor
触发,然后componentWillMount
,然后render
,然后componentDidMount
。因此,如果您的ajax调用获取了componentDidMount
中的数据,您将首先调用render
,导致没有数据被加载到已安装的组件上。大多数人通过使用微调器来解决这个问题,直到数据从ajax加载完成。一个简单的if语句应该完成这个