Question

我有一个React应用，该应用在不同组件之间使用多个提取调用。在“主页组件”中，我导入了较小的组件，所有这些组件都有自己的访存调用。

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

横幅广告，服务广告和关于广告有自己的指向不同端点的提取调用，现在我的问题是，响应速度较慢，如何等待所有子组件提取数据，然后呈现主页零件。我试图将isLoading的状态添加到一个加载器中，以等待提取组件，但是我不知道将isLoading设置为false时需要等待什么。

Answer 1

...如何等待所有子组件获取数据，然后呈现Homepage组件

你不知道。取而代之的是，将获取的内容移至Homepage组件的父组件，然后让该父组件仅在拥有所有必要信息的情况下呈现Homepage组件。用React的话来说，这是“ lifting state up”（例如，层次结构到父级）。

您可以以“正在加载”形式呈现主页，并以“正在加载”形式呈现其子组件，并让子组件回叫说他们现在有了他们的信息，这比简单地将状态提升到实际需要它的最高组件（因此它知道它可以呈现主页）要复杂得多。

Answer 2

正如@TJCrowder在回答中提到的那样，您需要提升状态并将其保留在父组件中。在那里发出网络请求，并将数据作为道具传递给子组件。您可以阅读有关提升状态here

的更多信息

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

Answer 3

使用预取中的承诺，可以建议，使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语句为true，并且您将看到JSX。

Answer 4

如果将获取移动到父组件或主组件，那么子组件有什么意义，你能想象继续添加它后父组件会是什么样子，它将是一大堆乱七八糟的东西，必须有另一种方法来处理这个

等待数据在子组件中获取，然后渲染

4 个答案: