等待子组件中的数据被获取,然后渲染

IT技术 javascript reactjs fetch
2021-05-19 19:10:10

我有一个 React 应用程序,它在不同的组件中使用多个 fetch 调用。在主页组件中,我导入了较小的组件,所有这些组件都有自己的 fetch 调用。

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

Banner、Services 和 About 对不同的端点都有自己的 fetch 调用,现在我的问题是因为响应有点慢,如何等待所有子组件获取数据,然后呈现 Homepage 组件。我已经尝试将 isLoading 的状态放入并添加一个加载器以等待组件获取,但我不知道要等待什么才能将 isLoading 设置为 false。

4个回答

...如何等待所有子组件获取数据,然后呈现主页组件

你没有。相反,您将获取移动到 Homepage 组件的父级,然后让该父级仅在具有所有必要信息时才呈现 Homepage 组件。在 React 的说法中,这是“提升状态”(例如,在层次结构上提升到父级)。

虽然您可以以“加载”形式呈现主页,并让它以“加载”形式呈现其子组件,并让子组件回调主页以表示他们现在拥有他们的信息,但这比只需将状态提升到实际需要它的最高组件(因此它知道它可以呈现主页)。

正如@TJCrowder 在他的回答中提到的,您需要提升您的状态并将其保留在父组件中。在那里发出网络请求并将数据作为props传递给您的子组件。您可以在此处阅读有关提升状态的更多信息

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

  async componentDidMount() {
     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>
       )
   }
}

在 fetch 中使用 promise,您可以按照建议的方式使用isLoaded属性状态来确定组件是否应呈现。

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

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

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

因此,一旦状态更新,它将触发具有新状态的组件的重新渲染,该状态将使 if 语句为真,并且您将出现 JSX。

如果将获取移动到父组件或主组件,那么无论如何子组件有什么意义,你能想象继续添加它后父组件会是什么样子,这将是一大堆混乱,必须有另一种处理方法