我在父 React 组件中使用 componentDidMount(( 方法从 API 获取一些数据,然后以 redux-state 保存。
在我的渲染方法中,我有另一个组件,它应该使用来自全局 redux 状态的数据。
我可以通过 props 将数据发送到我的子组件,或者我可以使用 mapStateToProps(( 加载它们。
如果我尝试控制台.log或将数据从子组件构造函数或 componentDidMount(( 方法中的 props 分配给 var,我没有按预期获得数据(我正在获得初始状态(。
控制台.log在我的渲染方法中,第一次渲染时会显示初始状态,第二次渲染时会显示正确的数据。
我需要确定我有正确数据的点。
。其中 var a = this.props.somethingFromState;将正确分配。
渲染方法是否最佳位置以及通常执行此操作的最佳实践是什么。谢谢。
这里有几个问题。
关于在哪里加载数据,componentDidMount
确实是调用ajax方法和加载数据的正确位置,正如facebook文档所建议的那样。
至于是否通过 props 将数据传递给子组件,我喜欢遵循 Dan Abramov(redux 的作者(关于表示与容器组件的指导。简而言之,尝试拥有一个容器组件来加载您的数据并执行所有逻辑,然后通过 props 将任何必要的内容传递给表示组件,如果可能的话,使它们成为纯函数。
关于何时获得正确的数据,请查看上面的 React 生命周期文档。您将看到constructor
触发,然后componentWillMount
,然后render
,然后componentDidMount
。因此,如果您的 ajax 调用在componentDidMount
中获取数据,您将首先调用render
,导致在已经挂载的组件上加载任何数据。大多数人通过放置微调器来解决此问题,直到数据从 ajax 完成加载。一个简单的 if 语句应该可以完成此操作