如何从单个异步请求初始化存储在单独组件中的状态？

Question

我想做的事：

• 我有各种独立的组件，它们在自己内部管理自己的状态。每个组件的状态绝对应该在每个组件内处理。
• 它们的初始状态来自后端。在此之后，它们会保持自己的状态。
• 我不想为每个组件发出大量单独的请求，所以我发出一个请求来获取所有组件的数据，然后将其传递下去，为每个组件提供初始数据。

我目前的解决方案：

const MyApp = () => {
    const [initialState, setInitialState] = useState();
    useEffect(()=>{getInitialState().then((data)=>{
        setInitialState(data);
    })},[])
    if (!initialState) {
        return <div>Loading...</div>
    }
    return (
        <>
            <ComponentA initialData={initialState.A} />
            <ComponentB initialData={initialState.B} />
            <ComponentC initialData={initialState.C} />        
        </>
    )
}

我当前解决方案的问题：

上述方法有效，但感觉不对。我已经调用了上述initialState，但它不应该是状态。它更像是一个道具，在应用程序的整个生命周期中存储初始数据会令人困惑。诚然，它没有做任何事情，也不会造成任何伤害，但如果它没有被任何东西使用，为什么还要保留它呢？

我什至考虑在渲染应用程序之前获取数据，然后将数据作为道具传递，但是我不会显示任何内容，而是显示加载屏幕，因此这似乎也不是一个好方法。

我的问题：

是否有更好（和/或标准）的方法来实现上述目标？ （我想使用钩子而不是类）。也许上面的想法不是一个坏主意，但感觉可能必须有更好的方法来做到这一点，而无需诉诸“全球”应用程序状态。我想让我的状态靠近使用它的相关部分的组件。

Answer 1

在这里使用 state 没有错。但是，假设getInitialState 应该只被调用一次，我会将它包装在useEffect 钩子中，这样在安装MyApp 时只会获取一次数据。这将防止 getInitialState 在组件重新渲染时被重复调用。

useEffect(() => {
  getInitialState().then((data)=>{
    setInitialState(data);
  });
}, []);

如果您不想使用状态来维护数据，则必须依赖Context API，或者使用某种状态管理库，例如Redux。