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

Question

嗯，我是新来的反应，我不清楚这个 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}/>
    )
  }
}

Answer 1

您需要从 componentDidMount 更新状态 (this.setState)。

类和 componentDidMount 示例 -> here 带有函数和钩子的示例 -> here

Answer 2

您实际上是从父级接收数据，因此子级中的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 : []
      })
    }
  }

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