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