小编Jud*_*ama的帖子

我想使用react-router-dom 6.4.2加载器函数获取数据并利用它的错误处理功能，并将获取的数据存储在 redux 存储中，以便在下次渲染时我不会再次获取相同的数据。

我首先想检查请求的数据在商店中是否可用，如果不可用，我将获取并存储它。问题是我们不能在函数中使用钩子。因此，由于加载程序基本上是函数，因此我无法使用useSelector其中的内部。

我正在考虑创建自己的钩子，检查请求的数据是否已在商店中可用，如果可用，则仅返回它，但如果尚不可用，则首先获取它，存储它，然后返回它。

const useFetchOrGetData = await (nameOfDataInTheStore, apiEndPoint) => {
    const data = useSelector(state => state.slice[nameOfDataInTheStore]);
    if(data) return data;
    try{
       const fetchData = await fetch(apiEndPoint);
       // dispatch the data to the store here

       // then return it
       return await fetchData.json();
    }catch(err){
        //handle err
    }
}

问题是我编写的代码是async并且我必须在我的组件中使用await它，所以我的组件也需要async如此，这使得它们返回一个promise反应不允许的代码。