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

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

2 个答案: