Javascript 向子组件发出获取请求后传递道具（React）

我无法将状态数据从父组件传递到子组件。我不知道为什么会发生这种情况，因此非常感谢您的反馈

当我在父组件的componentDidMount（）方法中输入console.log“this.state.epiodeData”时，我的获取请求返回了正确的数据，但在子组件的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

import React，{Component，useState，Fragment}来自'React'；
从“/TempComp”导入TempComp；
导出默认类PostContent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
id:“”，
情节数据：[]，
}
}
异步组件didmount（）{
const{id}=this.props.match.params；
const response=等待获取(`http://localhost:5000/episode/${id}/playlist`）；
const jsonData=await response.json（）；
这是我的国家({
episodeData:jsonData，//这是有效的！
id:id
});
console.log（'parent fetched data'，this.state.eposodedata）
}
render（）{
返回(
)
}
}

子组件

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

import React，{Component}来自“React”
类TempComp扩展组件{
建造师（道具）{
超级（道具）；
此.state={
}
}
componentDidMount（）{
console.log（'props in child component'，this.props.playlist）
}
render（）{
返回(
)
}
}
导出默认TempComp

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)
    );
  }

<> >为了查看子组件中的更新数据，请考虑使用<代码>组件-Debug更新（PROPPROPS，PREPATH，快照）< /代码>：

这对你有帮助吗？？您可以检查接收到的数据，然后调用子组件。。查看提供的沙箱控制台。。