Javascript 将父组件ComponentDidMount数据传递给子组件DidMount

我对react还不熟悉，我不清楚这个componentDidMount功能实际上是如何工作的，所以我正在父组件的componentDidMount中执行一个API调用。和 我想要子组件ComponentDidMount中的API响应数据 我有什么办法可以做到这一点吗？ 请检查下面的代码以供进一步参考，在阅读代码后，您可能会有清晰的想法

export class Parent extends Component {
  state = {
    businessMedia: null,
  }

  componentDidMount() {
    this.getTopBusinessMedia()
  }

  getBusinessDetails = async () => {
    const { media, business } = this.state.businessMedia;

    let id = localStorage.getItem('id');
    const data = {
      url: 'home_page_counts/',
      body: {
        user_id: id,
        media_id: media[0].id,
        business_id:business[0].id,
      }
    }
    let businessDetails = await fetch_Login(data);
    if (businessDetails.status === 200) {
      this.setState({
        business: businessDetails.data.length > 0 ? businessDetails.data : []
      })
    }
  }

  getTopBusinessMedia = async () => {
    const data = {
      url: "topmedia_business/"
    }
    const topBusiness = await apiGet(data)

    if ('status' in topBusiness && topBusiness.status === 200) {
      const { business, media } = topBusiness
      console.log("Business Media Data ",topBusiness)
      this.setState({ businessMedia:topBusiness }, () => {
        this.getBusinessDetails()
      })
    } else {
      consol.log("failed")
    }
  }

  render() {
    const { business, media,businessMedia } = this.state;

    return (
            <Child businessMedia={businessMedia}/>
    )
  }
}

class Child extends Component {
  componentDidMount() {
  console.log("Props Vlaue >>>",this.props)
  //in this component i want parent component API call data
  }

   render() {
    const { business, media,businessMedia } = this.state;

    return (
            <NewsFeeds businessMedia={businessMedia}/>
    )
  }
}

导出类父级扩展组件{
状态={
businessMedia:null，
}
componentDidMount（）{
这是getTopBusinessMedia（）
}
getBusinessDetails=async（）=>{
const{media，business}=this.state.businessMedia；
让id=localStorage.getItem（'id'）；
常数数据={
url:“主页计数/”，
正文：{
用户id:id，
媒体\u id:媒体[0]。id，
业务\u id:业务[0]。id，
}
}
让businessDetails=等待获取登录（数据）；
如果（businessDetails.status==200）{
这是我的国家({
业务：businessDetails.data.length>0？businessDetails.data:[]
})
}
}
getTopBusinessMedia=async（）=>{
常数数据={
url:“topmedia_business/”
}
const topBusiness=wait apiGet（数据）
if（'status'位于topBusiness&&topBusiness.status==200）{
const{business，media}=topBusiness
console.log（“商业媒体数据”，topBusiness）
this.setState（{businessMedia:topBusiness}，（）=>{
这个文件名为getBusinessDetails（）
})
}否则{
控制台日志（“失败”）
}
}
render（）{
const{business，media，businessMedia}=this.state；
返回(
)
}
}
类子扩展组件{
componentDidMount（）{
console.log（“Props-Vlaue>>>”，this.Props）
//在这个组件中，我需要父组件API调用数据
}
render（）{
const{business，media，businessMedia}=this.state；
返回(
)
}
}

您实际上正在从父级接收数据，因此子级中的

this.state

应该是

this.props

getBusinessDetails = async () => {
    const { media, business } = this.state.businessMedia;

    let id = localStorage.getItem('id');
    const data = {
      url: 'home_page_counts/',
      body: {
        user_id: id,
        media_id: media[0].id,
        business_id:business[0].id,
      }
    }
    let businessDetails = await fetch_Login(data);
    if (businessDetails.status === 200) {
      //check whether this block of code printed on the console.
      console.log('does it run????')
      this.setState({
        business: businessDetails.data.length > 0 ? businessDetails.data : []
      })
    }
  }

类子级扩展组件{
componentDidMount（）{
console.log（“Props-Vlaue>>>”，this.Props）
//在这个组件中，我需要父组件API调用数据
}
render（）{
//您的businessMedia数据来自父级，请使用this.props获取它
const{businessMedia}=this.props；
const{business，media}=this.state；
返回(
)
}
}

您需要从componentDidMount更新状态（this.setState）

类和组件的示例didmount->

---

带有函数和挂钩的示例->

我希望子组件的ComponentDidMount中包含父组件API数据。这里，道具的控制台日志包含空数据

class Child extends Component {
  componentDidMount() {
  console.log("Props Vlaue >>>",this.props)
  //in this component i want parent component API call data
  }

   render() {
    // your businessMedia data is from parent, use this.props to grab it 
    const { businessMedia } = this.props;
    const { business, media } = this.state;

    return (
       <NewsFeeds businessMedia={businessMedia}/>
    )
  }
}