如何根据用户输入动态更新useEffect钩子内调用的API请求URL

问题根源 #

useEffect的第二个参数是依赖数组，你当前传入的是空数组[]，这会导致这个副作用只在组件首次挂载时执行一次。后续即使用户输入变化导致finalUrl更新，useEffect也不会重新运行，因此每次拿到的都是首次请求的响应数据。

修复方法 #

把finalUrl加入useEffect的依赖数组即可，只要finalUrl的值发生变化，就会自动触发重新请求：

const finalUrl =`${apiUrl}id=${id}&timing=${time}&start=${finalStart}&end=${finalEnd}`;
console.log(finalUrl);

useEffect(() => {
    // 可选配置：添加请求取消逻辑，避免快速切换参数时旧请求返回覆盖新数据
    const abortController = new AbortController();

    axios
      .get<AxiosResponse>(finalUrl, {
        headers: {
          "Content-Type": "application/json"
        },
        signal: abortController.signal
      })
      .then(response => {
        setData(response);
      })
      .catch(error => {
        // 跳过请求取消产生的报错
        if (!axios.isCancel(error)) {
          console.log(error);
        }
      });

    // 组件卸载或依赖更新时，取消未完成的请求
    return () => abortController.abort();
}, [finalUrl]); // 此处添加finalUrl作为依赖

console.log(data); 

可选优化 #

• 可以新增加载状态、错误状态变量，对应给用户展示请求中、请求失败的提示
• 如果用户输入更新频率很高，可以添加防抖逻辑，避免短时间内发起大量无效请求

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