javascript - Wait for data to be fetched in child components, then render - Stack Overflow

admin管理员组

文章数量:1302406

I have a React app that uses multiple fetch calls throughout different ponents. In Home page ponent, I have imported smaller ponents, all of whom have it's own fetch call.

render() {
   return (
      <React.Fragment>
        <Banner/>
        <Services />
        <About />
      </React.Fragment>
    )
}

Banner, Services and About have their own fetch calls to different endpoints, now my question is because the response is a little bit on the slower side, how to wait for all of the child ponents to fetch data, then render the Homepage ponent. I have tried to put the state of isLoading and add a loader to wait for ponents to fetch, but I don't know what to wait for to set isLoading to false.

I have a React app that uses multiple fetch calls throughout different ponents. In Home page ponent, I have imported smaller ponents, all of whom have it's own fetch call.

render() {
   return (
      <React.Fragment>
        <Banner/>
        <Services />
        <About />
      </React.Fragment>
    )
}

Banner, Services and About have their own fetch calls to different endpoints, now my question is because the response is a little bit on the slower side, how to wait for all of the child ponents to fetch data, then render the Homepage ponent. I have tried to put the state of isLoading and add a loader to wait for ponents to fetch, but I don't know what to wait for to set isLoading to false.

• javascript
• reactjs
• fetch

Share Follow asked Nov 21, 2018 at 15:16 revetinjarevetinja 8511 silver badge1212 bronze badges 1

• You could pass individual isLoadings for each child, and set them accordingly when they finish fetching. – Colin Ricardo Commented Nov 21, 2018 at 15:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

...how to wait for all of the child ponents to fetch data, then render the Homepage ponent

You don't. Instead, you move the fetches to the Homepage ponent's parent, and then have that parent only render the Homepage ponent when it has all of the necessary information to do so. In React parlance, this is "lifting state up" (e.g., up the hierarchy to the parent).

While you could render the Homepage in a "loading" form, and have it render its child ponents in a "loading" form, and have the child ponents call back to the Home page to say they have their information now, that's more plicated than simply lifting the state up to the highest ponent that actually needs it (so it knows it can render the Homepage).

As @TJCrowder mentioned in his answer, You'll need to lift your state up and keep it in the parent ponent. Make a network request there and pass the data to your child ponent as props. You can read more about lifting-state-up here

class YourComponent extends React.Component {
  state = {isLoading: true, isError: false, banner: null, services: null, about: null};

  async ponentDidMount() {
     try {
        const [banner, services, about] = await Promise.all([
           // all calls
        ]);
        this.setState({ isLoading: false, banner, services, about });
     } catch (error) {
        this.setState({ isError: true, isLoading: false });
     }

  }

  render() {
     if (this.state.isLoading) {
        return <div>Loading...</div>
     }

     return (
        <React.Fragment>
           <Banner data={this.state.banner} />
           <Services data={this.state.services} />
           <About data={this.state.about} />
         </React.Fragment>
       )
   }
}

using promises in fetch you could, as suggested, have a isLoaded property state determine whether or not a ponent should render or not.

class ShouldRender extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoaded: false,
    }
  }

  ponentDidMount() {
    fetch('http://someresource./api/resource')
      .then(res => res.json())
      .then(data => {
        this.state({
          data,
          isLoaded: true,
        });
      })
  }

  render() {
    const { isLoaded } = this.state;
    if (isLoaded) {
      return <MyAwesomeReactComponent />
    }
    return null;
  }
}

So once the state is updated it will trigger a rerendering of the ponent with the new state that will render the if statement true and you're JSX will appear.

本文标签： javascriptWait for data to be fetched in child componentsthen renderStack Overflow