React组件中点击跳转按钮需两次生效的问题求助

你的问题出在异步操作的时序错误，以下是具体分析和修复方案：

问题原因 #

handleSubmit 中调用 getData() 后立刻检查 !loading，但 getData 是异步函数，请求还没完成时，loading 仍然是初始的 true，所以第一次点击时不会执行跳转。等第一次点击的请求完成后，loading 被设为 false，第二次点击时条件满足才会触发跳转。

修复方案 #

方案1：异步等待请求完成后再跳转

将 handleSubmit 改为异步函数，等待 getData 执行完毕后再调用 navigate：

const handleSubmit = async (event) => {
    event.preventDefault();
    await getData(); // 等待数据请求和state更新完成
    navigate('/search', { state: { event: data } });
};

方案2：直接使用请求返回的数据（更可靠）

因为React的setState是异步的，即使await getData()，data可能还没更新到最新值。可以让getData返回请求到的数据，直接用这个数据跳转：

const getData = async () => {
    setLoading(true); // 优化：请求开始时设置加载状态
    try {
      const response = await fetch('http://127.0.0.1:8000/api/filter', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      if (!response.ok) {
        throw new Error('Error');
      }
      const d = await response.json();
      setData(d);
      return d; // 返回获取到的数据
    } catch (error) {
      console.error('Error:', error);
      return [];
    } finally {
      setLoading(false);
    }
};

const handleSubmit = async (event) => {
    event.preventDefault();
    const fetchedData = await getData();
    navigate('/search', { state: { event: fetchedData } });
};

额外优化 #

建议把loading的初始值改为false，因为组件初始化时并没有在加载数据，在getData开始执行时再设置loading为true，这样可以配合UI显示加载状态，提升用户体验。

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