Question

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

我想做的是在此状态object []在应用程序中仍未定义的同时在子组件中显示一个加载微调器。

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

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

在大孙子组件中，如果用户选择，则需要在使用API填充字典的object []部分的同时将另一个id加载到字典中。加载字典的这一部分后，顶层应用程序层中的getObjects调用将返回我的曾孙中转换后的对象数组，以供选择。现在发生的事情是，在异步功能完成之前，选择框一直为空，然后按预期填充。我想做的是在此操作完成后，在大孙子中显示一个微调框，而不是选择框。

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

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

Answer 1

在您的子组件中有条件地渲染微调器和对象内容。

{
yourObjectFromParent 
? (<>Your object contents here</>)
: (<LoaderComponent/>)
}

OR

您可以尝试在父级中设置一个名为loading = true的状态，并在加载对象时将其设置为false。您应该将此加载状态作为道具传递给子组件。如果是这样，您的代码将是这样。也可以使用redux之类的全局状态处理程序来实现。

{
props.loading 
? (<>Your object contents here</>)
: (<LoaderComponent/>)
}

Answer 2

这将显示微调框，直到加载完成。

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

加载父状态数组时显示微调框

2 个答案: