reactjs - 加载父状态数组时显示微调器

Question

我在我的应用程序中使用带有 typescript 的 React。我现在拥有的是在我的顶级“app.tsx”中一个称为对象的状态，它是一个对象数组。我已经通过几个子组件传递了一个 getObjects 函数，它在顶级应用程序级别中定义。如果已定义此函数，则返回状态 object[]，否则将调用异步函数来加载对象。

我想做的是在我的子组件中显示一个加载微调器，而该状态对象 [] 在应用程序中仍未定义。

我知道如果我将 object[] 作为本地状态加载到我的子组件中，我可以轻松完成此操作。在应用程序中的状态完成加载后，有什么方法可以在子级别调用回调？我看到的唯一方法是将 object[] 本身传递给子组件，但我的知识仍然非常有限。谢谢你，我感谢所有的帮助。

编辑：
我的孙子组件中确实需要 getObjects 函数。我稍微简化了结构。真正的情况是在 app 对象中是一个 Dictionary 类型，它充当一个键值对，其数字 id 对应于特定的对象数组。在应用程序加载时，选择一个键值对并异步加载，同时用户可以继续使用该应用程序。它在后端加载这些初始子组件，因此不需要微调器。

稍后在曾孙组件中，如果用户选择，则需要在使用 API 填充字典的 object[] 部分时将另一个 id 加载到字典中。加载字典的这一部分后，顶层应用程序层中的 getObjects 调用会返回我曾孙中的转换后的对象数组，以用于选择。现在发生的事情是选择框只是空的，直到异步函数完成，然后它按预期填充。我想做的是在此操作完成时在曾孙中显示一个微调器来代替选择框。

由于该结构是一个字典，从技术上讲，字典的两个值可能会尝试一次加载，我不确定我是否要尝试通过并使用布尔值进行此加载。

我不愿意通过整个字典本身并等待加载特定的字典键值对，因为这似乎是一种反模式。完成我想做的事情的最佳方法是什么？

标签： reactjstypescript

Answer 1

这将显示一个微调器，直到加载完成。

class MyComponent extends Component {
  state = {
        isLoading: true,
        data: null
  }

  componentDidMount() {
    fetchSomeData(url)
      .then(data => {
        this.setState({isLoading: false, data: data});
      })
    }

    render() {
        const {isLoading, data} = this.state;
        return isLoading ? <ChildComponent data={data} /> : <Spinner />
    }
}