React异步Props传递组件问题：组件渲染时接收空Props求助

问题描述 #

我在向组件传递异步Props时遇到问题。这些Props来自通过API请求获取数据的状态管理器：

const productState = useAppSelector((state) => state.product);
const categoriesState = useAppSelector((state) => state.categories);

我尝试用加载包装组件，只在Props加载完成后渲染目标组件：

<AsyncWrapperComponent
          isLoading={productState.isLoading && categoriesState.isLoading}
        >
          <AvailableItemView
            productList={productState.products}
            categoriesList={menuCategoryMock}
          />
        </AsyncWrapperComponent>

但问题在于Props未等待加载完成，组件渲染时接收的是空Props，求解决办法。

修复方案 #

1. 修正加载状态判断逻辑 #

你当前用&&判断加载状态，意味着只有两个状态都处于加载中时，才会显示加载状态。只要其中一个加载完成，isLoading就会变为false，此时子组件会被提前渲染，但另一个数据可能还未加载完成，导致空Props。

应该改为或逻辑，只要有一个数据还在加载，就保持加载状态：

<AsyncWrapperComponent
  isLoading={productState.isLoading || categoriesState.isLoading}
>
  <AvailableItemView
    productList={productState.products}
    categoriesList={menuCategoryMock}
  />
</AsyncWrapperComponent>

2. 额外校验数据有效性 #

即使加载状态变为false，也可能因为接口返回空数据、状态初始化值为空等情况，导致组件拿到无效Props。可以在渲染子组件前，额外判断数据是否存在：

<AsyncWrapperComponent
  isLoading={productState.isLoading || categoriesState.isLoading}
>
  {productState.products.length > 0 && categoriesState.categories?.length > 0 ? (
    <AvailableItemView
      productList={productState.products}
      categoriesList={categoriesState.categories}
    />
  ) : null}
</AsyncWrapperComponent>

（注：如果categoriesList应该用接口返回的categoriesState.categories而非模拟数据menuCategoryMock，记得替换）

3. 检查状态管理器的初始化值 #

确认状态切片中，products和categories的初始值是否合理。比如初始化为空数组而非undefined，避免组件拿到undefined报错：

// 示例：product slice的初始状态
const initialState = {
  products: [],
  isLoading: false,
  error: null
};

4. 验证AsyncWrapperComponent的逻辑 #

检查AsyncWrapperComponent的实现，确保它在isLoading为true时，确实不会渲染子组件：

function AsyncWrapperComponent({ isLoading, children }) {
  if (isLoading) {
    return <div>加载中...</div>;
  }
  return <>{children}</>;
}

如果组件逻辑写反（比如isLoading为true时渲染子组件），会直接导致提前渲染问题。

内容的提问来源于stack exchange，提问作者lcsaloon