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

【问题标题】：React-Query use query in context and set state of context and pass to componentReact-Query 在上下文中使用查询并设置上下文状态并传递给组件
【发布时间】：2022-01-22 23:47:30
【问题描述】：

我的 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>
  );
};

【问题讨论】：

标签： reactjs react-query

【解决方案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])

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

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

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

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

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

我在React Query as a State Manager

中写过很多关于这个主题的文章

【讨论】：