在获取请求到子组件后发出传递道具（反应）答案

【问题标题】：Issue Passing Props After Fetch Request To Child Component (React)在获取请求到子组件后发出传递道具（反应）
【发布时间】：2020-04-22 15:13:37
【问题描述】：

我在将状态数据从父组件传递到子组件时遇到问题。我不确定为什么会发生这种情况，因此非常感谢任何反馈。

当我在父组件的 componentDidMount() 方法中 console.log 'this.state.episodeData' 时，我的 fetch 请求返回正确的数据，但它没有显示在 componentDidMount() 方法的 console.log 中在子组件中。我做错了什么？

我已简化示例，仅显示相关的获取请求和数据处理：

父组件

import React, { Component, useState, Fragment } from 'react';
import TempComp from './tempComp';

export default class PostContent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: '',
      episodeData: [],
    }
  }

  async componentDidMount() {
    const { id } = this.props.match.params;
    const response = await fetch(`http://localhost:5000/episode/${id}/playlist`);
    const jsonData = await response.json();
    this.setState({
      episodeData: jsonData, //this is working!
      id: id
    });
    console.log('parent fetched data', this.state.episodeData)
  }

  render() {
    return (
      <Fragment>
        <TempComp playlist={this.state.episodeData} />
      </Fragment>
    )
  }
}

子组件

import React, { Component } from 'react'

class TempComp extends Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  componentDidMount() {
    console.log(‘props in child component’, this.props.playlist)
  }

  render() {
    return (
      <div>
      </div>
    )
  }
}


export default TempComp

【问题讨论】：

这对您有帮助吗？ codesandbox.io/s/react-fetch-example-1xd67你可以检查接收到的数据然后调用子组件..查看提供的沙箱的控制台..

标签： javascript reactjs

【解决方案1】：

componentDidMount 在组件初始渲染后第一次被调用。这意味着您的子组件会在您完成获取请求之前呈现。在父组件中您看不到它，因为setState 异步工作并且当您尝试打印它时它没有完成保存您的状态。如果你想看到它，将回调传递给 setState：

  async componentDidMount() {
    const { id } = this.props.match.params;
    const response = await fetch(`http://localhost:5000/episode/${id}/playlist`);
    const jsonData = await response.json();
    this.setState({
      episodeData: jsonData, //this is working!
      id: id
    }, () => { 
        console.log('parent fetched data', this.state.episodeData)
    );
  }

为了在您的子组件中查看更新的数据，请考虑使用componentDidUpdate(prevProps, prevState, snapshot)：

componentDidUpdate(prevProps, prevState, snapshot) {
  console.log('props in child component', this.props.playlist) ;
}

【讨论】：