如何根据父组件的 API 调用设置子组件的初始 state？

Question

I have a parent component from which I am making an api call on componentDidMount.

I want to set the child component's initial state based on the response of the api.

How can I do this? The problem which I am facing is that the initial value of child component is set on the first render of the parent component.

Answer 1

You can render the child component conditionally so it is not rendered until the call resolve, for example:

class Parent extends Component {
  componentDidMount() {
    APICall.then(response => this.setState({ childState: response.data }));
  }
  render() {
    return (
      <div>
        {this.state.childState && <Child intialState={this.state.childState} />}
      </div>
    );
  }
}

Answer 2

You can fetch data in your parent component then pass it to the child.

import React, { useState, useEffect } from 'react';
import Child                          from './child';
import axios                          from 'axios';

const Parent = () => {

    const [data, setData] = useState();

    useEffect( () => {
        const endpoint = 'https//:fakedata.com'
        axios.get(endpoint).then((res) => setData(res));

    }, [])

    return (  
        data && <Child data={data}/>
    );
}

export default Parent;