Reactjs 等待数据获取和处理逻辑的最佳实践是什么？

我有这样一个组件：

const[products，setProducts]=useState（[]）；
const[store，setStore]=useState（[]）；
const fetchProducts（）=>{
…获取（'product_url'）。然后（（products）=>{
产品(产品);；
}).catch（）；
}
常量fetchStore（）=>{
…获取（'store_url'）。然后（（store）=>{
设置存储（存储）；
}).catch（）；
}
useffect（（）=>{
获取产品（）；
fetchStore（）；
}, []);
const handleLogicaDerproducts重新加载成功=（）=>{
//产品、商店
//这里有些逻辑
}

通常，只需测试渲染函数中的值，并在请求后进行任何处理

// Testing for length because you are initializing them to empty arrays. You should probably use null instead.

if (!(products.length && store.length)) {
    return <LoadingComponent />
}

// Any other processing you need goes here

return <>
    {/* Your result goes here */}
</>;

//正在测试长度，因为您正在将它们初始化为空数组。您可能应该改为使用null。
if（！（products.length和store.length））{
返回
}
//您需要的任何其他处理都在这里进行
返回
{/*您的结果在这里*/}
;

通常，只需测试渲染函数中的值，并在请求后进行任何处理

// Testing for length because you are initializing them to empty arrays. You should probably use null instead.

if (!(products.length && store.length)) {
    return <LoadingComponent />
}

// Any other processing you need goes here

return <>
    {/* Your result goes here */}
</>;

//正在测试长度，因为您正在将它们初始化为空数组。您可能应该改为使用null。
if（！（products.length和store.length））{
返回
}
//您需要的任何其他处理都在这里进行
返回
{/*您的结果在这里*/}
;

您可以创建另一个

useffect

来跟踪

产品

和

存储

：-

//处理获取产品和商店后发生的事情
const HandleLogicAfterProductsandResloadingSuccess=（产品、商店）=>{
//如果两者都成功获取数据（不是空数组）
如果（products.length>0&&store.length>0）{
//做点什么
}否则{
警报（'未正确获取数据！'）
}
}
//处理产品和商店发生的更改（注意：每次对产品和商店进行更改时都会触发此useEffect）
useffect（（）=>{
HandleLogic企业产品重新加载成功（产品、商店）
}，[产品、商店]）

您可以创建另一个

useffect

来跟踪

产品

和

存储

：-

//处理获取产品和商店后发生的事情
const HandleLogicAfterProductsandResloadingSuccess=（产品、商店）=>{
//如果两者都成功获取数据（不是空数组）
如果（products.length>0&&store.length>0）{
//做点什么
}否则{
警报（'未正确获取数据！'）
}
}
//处理产品和商店发生的更改（注意：每次对产品和商店进行更改时都会触发此useEffect）
useffect（（）=>{
HandleLogic企业产品重新加载成功（产品、商店）
}，[产品、商店]）

在useEffect内部，假设仅在组件的装载时间不需要此调用且阵列deps将为空阵列在useEffect之外，假设仅在组件的装载时间不需要此调用且阵列deps将为空阵列