使用 React api 查询 useState Hook 管理

Posted 2023-02-22

【中文标题】使用 React api 查询 useState Hook 管理

【英文标题】：Manage with React api query useState Hook

【发布时间】：2021-12-18 10:04:12

【问题描述】：

创建 useState Hook 后 对于性别，年龄 useState('30'); useState('女'); 如果你设置

http://api.minsu.com/product/$id?gender=feamle&age=30

我将 react-query(useQuery) 用于 api 状态管理库。 没有什么不同，我现在正在创建一个动态页面，然后根据 id 值显示页面。

这是一个例子。

https://api.minsu.com/product/$id

而在详细页面，http://api.minsu.com/product/$id?gender=feamle&age=30这样，性别和年龄随机输入数据，只显示30岁女性的具体数据。

选择框（选项） 选择女性和年龄后 将api设置为https://api.minsu.com/product/$id?gender=$gender&age=$age 我想通过api get接收到性别和年龄后根据选择的select通过这种方式修改显示详细信息页面。

我好像没有直接用输入和选择框，也不知道用useState Hook怎么写查询。

但我不知道该怎么办。

这是我现在的代码。

我想了大约一个小时。 我用 setState('') 创建了年龄和性别。

    const [gender, setGenders] = useState('female');
    const [age, setAges] = useState('30');


   const fetchDetail = async () => 
        const res = await 
        fetch(`https://api.minsu.com/product/$id?gender=$female&age=$age`, 
            headers: 
                Authorization: `Bearer $token`,
            ,
            withCredentials: true 
        );
        return res.json();
    

    const  data: ProductDetail, status, error, isFetching  = useQuery('productDetail', fetchDetail, 
        notifyOnChangeProps: ['data'], 
        staleTime: 100000000,
    )
    console.log(ProductDetail);

return (
 

 <input type="number" placeholder=Enter your age .... />
 <button onClick=onClick />
 

 <option>Select gender</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
)

即总结

const [inputs, setInputs] = useState(
        age: '30',
        gender: 'female',
    )
    const age, gender = inputs; 

    const onChange = (e) => 
        setInputs( ...inputs, [e.target.age]:e.target.value ) 
    

  return (
 <input name="age" onChange=onChange placeholder = "age"/> 
            <input name="gender" onChange=onChange placeholder = "gender"/>

)

我想在创建输入后通过执行 onChange 来更改查询，但是渲染不起作用。

【问题讨论】：

更新表单时获取到的网址不更新的问题吗？

@HenryWoody 是的，没错。如何在接收到年龄和性别作为输入（年龄），性别（选择框）后更新查询

这和***.com/questions/69834291/…是同一个问题吗？在这两种情况下，仍然不清楚问题是什么。如果我在查看 useQuery 文档后不得不猜测，您需要更新 queryKey 参数以触发钩子。

@DrewReese 我不知道是否需要将查询更改为带有年龄和性别的 setState。

这能回答你的问题吗？ Get form data in ReactJS

【参考方案1】：

假设您正在正确更新本地状态（age 和 gender）并且只需要再次触发查询。

Query Basics

要订阅组件或自定义挂钩中的查询，请调用 useQuery 挂钩至少：

查询的唯一键 一个返回承诺的函数： 解析数据，或 引发错误

您提供的唯一键在内部用于重新获取， 在整个应用程序中缓存和共享您的查询。

If your query function depends on a variable, include it in the query key.

给定请求 URL：

`https://api.minsu.com/product/$id?gender=$gender&age=$age`

那么id、age 和gender 可能都应该作为查询键的一部分包含在内。

const 
  data: ProductDetail,
  status,
  error,
  isFetching,
 = useQuery(
  ['productDetail', id, age, gender],
  fetchDetail,
  
    notifyOnChangeProps: ['data'], 
    staleTime: 100000000,
  ,
);

【讨论】：

已应用。但是我查了查询键，但是不知道如何更改 $age $gender 的值。

@ssksksks 这就是状态更新所做的。您能否只提供完整的代码，以便我们可以看到您正在尝试做什么，而不是在“您需要帮助更新状态吗？”之间来回切换。和“您需要帮助更新查询吗？”

我需要更改查询。但是是不是可以通过改变状态来改变查询呢？

@ssksksks 仅就状态变化而言，没有。您需要更新状态以触发重新渲染，更新的状态本质上是 useQuery React 钩子的依赖项。它将这种“依赖关系”散列到一个键中，因此如果您再次发出相同的请求并且没有使响应无效，则不会向网络发出请求，否则会发出新的网络请求。

useQuery 支持！那我现在该怎么办？