如何更改api中参数查询的值?

Question

我对如何像API上的filter算法那样实时更改params的值感到困惑。每次我改变值所请求的数据也改变，当我把一个字符串硬编码在params它响应一些数组，但当我使用useState它不。

import {React,useEffect,useState} from 'react'
import {useForm} from 'react-hook-form'
import List from './List'
import axios from 'axios'
const url = 'https://api.coingecko.com/api/v3/search'
export default function SearchField(){
const {register ,watch, handleSubmit , formState:{error}} = useForm()
const [query ,setQuery] =useState('bitcoin')

const fetchQuery = async (e) => {
try{
const {data} = await axios(url,
{params:{query: `{${query}}`}},
{headers:{Accept: 'Application/json'}})
console.log(data)
console.log(query)
}catch(error){
console.log(error)
}
}
useEffect(()=>{
fetchQuery()
},[])
return(
<>
<form onSubmit={handleSubmit(data => console.log(data))}>
<input {...register('coinSearch')}/> 
</form>
<List search={[]}/>
</>
)
}

如上面代码所示，query:有查询变量，但它不改变值。

p。S我试图使用watch()来实时读取<input>，但仍然没有

Answer 1

删除fetchQuery并更新useEffect，以便在更改query时执行fetching。

useEffect(()=>{
(async () => {
try{
const {data} = await axios(url,
{params:{query: `{${query}}`}},
{headers:{Accept: 'Application/json'}})
console.log(data)
console.log(query)
}catch(error){
console.log(error)
}
})()
},[query])

希望这能解决你的问题。