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

Question

我的反应应用程序中有上下文，我想在上下文中调用查询并将状态值设置为 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

undefined只要是 true data，react-query 就会给你isLoading。由于 的初始值useState是同步的，因此这实际上不起作用。

如果你真的想从react-query复制状态，你要做的就是调用 insetMyValue或onSuccessin a useEffect：

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

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

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

我想在上下文中调用查询并将状态值设置为 api 数据中的对象。

我猜您认为您想要这个是因为您希望可以在应用程序中的任何位置访问数据。好消息是，react-query 是一个状态管理器，您可以执行以下操作：

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

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

我在以下文章中广泛撰写了有关此主题的文章：React Query as a State Manager