关于生命周期方法和渲染反应？

Question

My question is about life cycle methods in react, now i have this scenario: Some data are fetched by ajax in componentDidMount in the parent component and then this data passed as a prop to as the child component, now we are in the child so we can implement different life cycle methods,

componentDidMount : can not see the true value of the prop for example logging date in it returns empty array instead of the desired array

componentWillMount : the same.

componentWillReceiveProps : the same if not use nextProps

componentDidUpdate : logging data returns the desired data passed as prop

render : returns the desired data

So should i always be forced to call my data in componentDidUpdate or render???, Is there a way to manage that without redux??

Answer 1

Your child's componentWillMount and componentDidMount may only be receiving an empty array (I assume this is a default) because the Child component is instantiated before the API result is returned eg <Child result={result} /> as opposed to result.length > 0 && <Child result={result} /> . Mount only happens once and then componentDidUpdate happens after for every prop change.

Assuming that you are just displaying the data passed down, it is perfectly acceptable to handle it in render. Otherwise if you want to perform additional side-effects then check for it's completeness in the parent component (above paragraph) at which point you should be able to see the full value in the child's componentDidMount . Alternatively you can perform the completeness check in the child's componentDidUpdate as you suggest and handle it there instead.