如何使用 ReactQuery 中的 useQuery 挂钩来更新状态？答案

【问题标题】：How to use useQuery hook from ReactQuery to update state?如何使用 ReactQuery 中的 useQuery 挂钩来更新状态？
【发布时间】：2020-10-18 03:32:08
【问题描述】：

import React, {useState, useEffect, Component} from 'react';
import {Grid, Paper, TextField} from '@material-ui/core'
import DataManager from './../data_manager/data_manager'

const dataManager = new DataManager();

const Tile = (props)=>{
    // Initializing State Variables
    const [state, setState] = useState({
        data : {}
    })

    const { status, data, error, isFetching } = useQuery("data",async()=>{
        const res = await fetch("localhost:8000");
        return res.json()
    }

    if(status==="success"){
        setState({data})
    }else{
        return(<p>Doing</p>)
    }
}

这段代码导致了一个无限循环，渲染不断循环。

我认为是因为 setState 导致 useQuery 再次执行，再次设置状态等等。

感谢任何帮助。我想将从 useQuery 获得的数据存储在状态变量中。

TIA。

【问题讨论】：

标签： reactjs react-query

【解决方案1】：

您可能想使用useEffect，因为现在您在每次渲染时都获取：

const Tile = (props) => {
  const [state, setState] = useState({
    data: {},
  });

  const { status, data, error, isFetching } = useQuery("data", async () => {
    const res = await fetch("localhost:8000");
    return res.json();
  });

  useEffect(() => {
    if (status === 'success') {
      setState({ data });
    }
  }, [status, data]);

  return status === 'success' ? (
    <div>Success and use data</div>
  ) : (
    <div>Loading</div>
  );
};

【讨论】：

【解决方案2】：

您不需要这样做，它会为您完成。一个关于 React Query 的精彩视频是 https://www.youtube.com/watch?v=DocXo3gqGdI，其中的部分实际上是通过简单地使用 useQuery 来替换具有显式状态处理的设置。

如果您真的想设置一些状态，那么更好的方法是从 onSuccess 回调中进行。见https://react-query.tanstack.com/reference/useQuery。

【讨论】：