如何实时修改API请求中params的查询值？React技术问题求助

核心问题分析 #

1. useEffect依赖缺失：初始useEffect仅在组件挂载时执行一次，query变化时不会触发新的API请求
2. 输入框与状态未关联：使用react-hook-form的watch但未监听输入框值来更新query状态
3. API参数格式错误：params中错误地给query值包裹了大括号，导致实际传递的参数格式不符合API要求
4. Axios配置写法错误：headers被单独作为第三个参数传入，正确写法应放在第二个配置对象内
5. 数据未传递给子组件：获取到的API数据未存入状态，List组件始终接收空数组

修正后的完整代码 #

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 } = useForm()
  const [query, setQuery] = useState('bitcoin')
  const [searchResult, setSearchResult] = useState([]) // 存储API返回数据

  // 监听输入框变化，实时更新query状态
  const searchValue = watch('coinSearch')
  useEffect(() => {
    if (searchValue) {
      setQuery(searchValue)
    }
  }, [searchValue])

  const fetchQuery = async () => {
    try {
      // 修正Axios配置：headers合并到同一配置对象，参数去掉多余大括号
      const { data } = await axios(url, {
        params: { query },
        headers: { Accept: 'application/json' }
      })
      setSearchResult(data.coins) // 存储返回的coins数组到状态
    } catch (error) {
      console.error('请求失败:', error)
    }
  }

  // 当query变化时，重新发起API请求
  useEffect(() => {
    fetchQuery()
  }, [query])

  return (
    <>
      <form onSubmit={handleSubmit(data => console.log('提交数据:', data))}>
        <input 
          {...register('coinSearch')}
          placeholder="搜索加密货币"
          defaultValue={query} // 初始化输入框值为默认query
        /> 
      </form>
      <List search={searchResult} /> {/* 传递获取到的数据给List组件 */}
    </>
  )
}

关键修改点说明 #

• 监听输入框更新状态：通过watch('coinSearch')实时获取输入框值，同步更新query状态
• 修正useEffect依赖：将query加入useEffect依赖数组，确保query变化时自动触发新请求
• 修复API参数格式：去掉query值的大括号包裹，直接传递原始字符串，符合CoinGecko API的参数要求
• 合并Axios配置：将headers放入第二个配置对象中，保证请求配置正确生效
• 存储并传递数据：新增searchResult状态存储API返回的结果，传递给List组件用于渲染

内容的提问来源于stack exchange，提问作者Evan Feliza