使用 React api 查询 useState Hook 管理

Question

创建 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 来更改查询，但是渲染不起作用。

Answer 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,
  },
);