Question

我有一个类进行api调用，并像这样将响应数据设置为状态值

    export class TestClass extends React.Component {
    state = {
       data: null 
    }

    componentDidMount(){
       fetch('http://www.nfl.com/feeds- 
       rs/bigPlayVideos/2018/REG/1.json')
       .then(response => response.json())
       .then(res => this.setState({ data: res.bigPlays }))
    }

上面的代码可以正常工作并设置状态。然后在渲染器中，我像这样传递属性。

     render (){
       const {data} = this.state;

       return ( 
        <div>
         <ChildComponent data={data} />
         </div>
        )
        }

“我的孩子”组件看起来像这样

    componentDidMount(){
      const {data} = this.props
     }

数据属性在页面更新后正确进入渲染，但在componentDidMount中为null。我需要做一些进一步的状态更新，所以无论如何我可以访问componentDidMount（）中的值，如果没有的话，那将是在ChildComponent类中进行进一步状态逻辑的最佳位置。

非常感谢您的帮助。

Answer 1

您可能要使用componentDidUpdate，因为父级中的state.data最初为空。

如果您只想处理非null的data，则只能将子级挂载一次data !== null：return <div>{data !== null && <ChildComponent data={data} />}</div>

Answer 2

您可以使用componentDidUpdate并检查this.props.data是否不为空。

componentDidUpdate() {
    const {data} = this.props
    if(data != null){
        // do what you want
    }
}

但是您还应该有一个条件，以避免在每个渲染器上都发生这种情况。

您还可以做的是将默认值传递给data。

const { data = [] } = this.props // default value is an array.

Answer 3

这是正常现象，因为实际发生的情况如下：除非调用了所有子组件componentDidMount，否则不会调用任何父组件的componentDidMount。

因此，如果组件B是组件A的子代，则B组件componentDidMount的方法将在A组件的方法之前被调用，因为{ {1}}是B的孩子。

将道具从状态传递到componentDidMount

3 个答案: