React事件触发时URL使用旧参数的问题及解决

问题描述 #

• 实现按名称/订单排序筛选数据的DisplayShops组件时，触发点击或change事件后，请求URL总是使用上一次的参数
• 示例：首次点击↑按钮，请求URL为http://localhost:8000/property?leaseAmount=&tenantName=，而非预期的leaseAmount=asc，再次点击才会生效
• 曾尝试修改fetchWithFilter函数用临时变量存储值，但租户筛选问题仍存在

解决方案 #

通过useEffect监听tenant和leaseAmount状态变化，当状态变更时自动调用fetchData发起请求，确保请求使用最新的参数值。

关键代码 #

useEffect(() => {
  async function fetchData() {
    let url = tenant === "" && leaseAmount === "" 
      ? `http://localhost:8000/property` 
      : `http://localhost:8000/property?leaseAmount=${leaseAmount}&tenantName=${tenant}`;
    let r = await axios.get(url);
    setShopList(r.data.shops);
  }
  fetchData();
}, [tenant, leaseAmount]);

const fetchWithFilter = async (e) => {
  e.preventDefault();
  let { name, value } = e.target;
  if (name === "searchByTenant") setTenant(value);
  if (name === "searchByOrder") setLeaseAmount(value);
};

原理说明 #

React的setState是异步操作，若在事件处理函数中直接发起请求，无法获取刚更新的最新状态值。而useEffect的依赖数组包含tenant和leaseAmount，只有当这两个状态发生变化时才会执行内部的fetchData，此时能确保拿到最新的状态参数，生成正确的请求URL。

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