React项目同页面调用history.push未触发页面更新问题求助

核心问题点 #

1. 搜索提交逻辑不符合规范 #

直接修改history.search的操作无效，history是路由操作对象，属性不可直接修改。你当前的history.push调用仅传递了路径参数，没有携带搜索参数，URL变化属于非规范操作的结果，会导致路由状态不同步。

2. 列表页未监听路由参数变化 #

同路由跳转时组件不会重新挂载，仅会触发更新。你当前的列表页仅在首次挂载时计算请求URL，路由参数变化后没有重新计算URL、发起接口请求。同时你错误从history对象获取搜索参数，当前路由的查询参数应该从location对象获取。

3. 自定义请求钩子缺少依赖监听 #

如果你的useDataApi钩子没有将传入的URL作为依赖项，就算URL发生变化，也不会重新触发请求逻辑。

具体修复步骤 #

修正搜索组件提交逻辑 #

修改SearchInput组件内的submitHandler方法：

const submitHandler = (e) => {
  e.preventDefault();
  // 路由参数直接传入push方法，不要直接修改history属性
  history.push({
    pathname: LISTING_POSTS_PAGE,
    // 对搜索词编码，避免特殊字符导致参数解析错误
    search: `?q=${encodeURIComponent(searchword)}`
  })
}

修正列表页参数获取与请求逻辑 #

使用useMemo绑定URL计算逻辑与location.search依赖，确保路由参数变化时自动更新请求URL：

export default function Listing({ location, history }) {
  // 从location对象获取当前路由的搜索参数，依赖变化自动重新计算URL
  const url = React.useMemo(() => {
    let baseUrl = 'http://127.0.0.1:5000/api/products';
    if (location.search) {
      baseUrl += location.search;
    }
    return baseUrl;
  }, [location.search]);

  const { width } = useWindowSize();
  const [showMap, setShowMap] = useState(false);
  // 直接传入动态计算的url即可
  const { data, loading, loadMoreData, total, limit } = useDataApi(url);
  // 剩余代码保持不变
  // ...
}

检查自定义请求钩子依赖配置 #

确保useDataApi内部发起请求的useEffect将URL作为依赖项，示例参考：

// useDataApi 内部核心逻辑参考
function useDataApi(url) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
      setLoading(false);
    };
    fetchData();
  // 必须将url加入依赖数组，url变化自动重新请求
  }, [url]);

  return { data, loading, /* 其他返回值 */ };
}

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