如何解决React中基于params生成URL时GET请求用旧状态的问题？

问题原因 #

useState的状态更新是异步的，当你在useEffect中调用setUrl后立即执行axios.get(url)，此时url仍然是更新前的旧值，导致请求使用错误的地址。

解决方案 #

不需要将URL存储在状态中（除非组件其他地方需要用到这个状态），直接在useEffect内部计算出目标URL，并用这个本地变量发起请求即可。同时在需要跳转的分支提前退出，避免不必要的API调用：

const Feeds = () => {
  // 如果组件其他地方不需要url状态，可以直接删除这一行
  // const [url, setUrl] = useState("");

  useEffect(() => {
    let apiUrl;
    switch (params.category) {
      case "news_National":
        apiUrl = "http://localhost:8090/newsOnAir/national";
        break;
      case "news_International":
        apiUrl = "http://localhost:8090/newsOnAir/international";
        break;
      case "XYZ":
        navigate("/home");
        return; // 提前退出，不执行后续API请求
      // 其他分支...
      default:
        apiUrl = ""; // 处理默认情况
    }

    // 如果需要更新url状态（组件其他地方用到）
    // setUrl(apiUrl);

    if (apiUrl) {
      axios.get(apiUrl)
        .then((response) => {
          console.log(response);
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }, [params.category, navigate]); // 把navigate加入依赖数组

  return (/* ... */)
}

关键说明 #

1. 本地变量替代状态：用apiUrl这个本地变量存储计算后的地址，避免依赖异步更新的useState值。
2. 提前退出跳转分支：在case "XYZ"中调用navigate后立即return，防止后续API请求执行。
3. 完善依赖数组：将navigate加入useEffect的依赖数组，符合React Hooks的规则。
4. 可选状态更新：如果组件其他部分需要用到url状态，仍然可以调用setUrl(apiUrl)，但API请求必须使用本地的apiUrl变量，而非状态中的url。

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