React-Query 在上下文中使用查询并设置上下文状态并传递给组件

Question

我的 react-app 中有上下文，我想在上下文中调用查询并将状态值设置为来自 api 数据的对象。我尝试了以下操作，但出现错误，无法读取未定义的属性 (4)。所以我知道这可能是因为数据尚未返回，因此我无法将状态设置为数组中的对象，那么如何解决这个问题呢？另外，我将如何处理状态，即在上下文传递到的组件中加载等。

另一个问题是我应该在上下文中调用 API，还是应该在组件中调用然后在组件中设置上下文状态？这是更好的方法吗？

到目前为止的代码：

export const DataProvider: React.FunctionComponent = ({ children }) => {
 const getApi = async (): Promise<any> => {
    const response = await axios.get(`https://www.xxxxxx`).then(res => res.data);
    return response;
  }

  const { data: result, status, error, isFetching }: any = useQuery(['apiData'], () => getApi());

  const [myValue, setmyValue] = React.useState(result[4]); // this is causing the issue

  return (
    <DataContext.Provider value={{myValue, setmyValue, result}}>
      {children}
    </DataContext.Provider>
  );
};

Answer 1

只要 isLoading 为真，

react-query 就会为 data 提供 undefined。由于 useState 的初始值是同步的，所以这实际上行不通。

如果你真的想从 react-query 复制状态，你要做的是在 onSuccess 或 useEffect:

中调用 setMyValue

const { data: result, status, error, isFetching }: any = useQuery(['apiData'], () => getApi());

React.useEffect(() => {
  if (data) {
    setMyValue(data)
  }
}, [data])

这也将确保后台更新将正确反映在您的状态中。但是，您通常根本不需要这样做：

I want to call a query in context and set the state value to an object from the api data.

我猜你认为你想要这个是因为你想在应用程序的任何地方访问数据。好消息是 react-query 是一个状态管理器，你可以这样做：

export const useApiData = useQuery(['apiData'], () => getApi());

然后您可以在应用中的任何位置调用 const { data } = useApiData() 来检索缓存数据。您还将免费获得后台更新。

我在以下地方写了很多关于这个主题的文章：React Query as a State Manager

React-Query 在上下文中使用查询并设置上下文状态并传递给组件

React-Query use query in context and set state of context and pass to component

reactjs

react-query