React食谱应用：添加useEffect+useNavigate后无法进入Create页面

当你进入Create页面时，useFetch Hook会立即执行fetchData(option)（因为传入的method是POST），但此时option为null，fetch会发送默认的GET请求到/recipes接口，获取到所有食谱数据后更新data状态。Create组件中的useEffect检测到data不为null，就立刻触发跳转至首页，导致你无法正常进入Create页面。

1. 修复useFetch Hook的请求触发逻辑 #

修改useFetch中的useEffect代码，仅当option存在时才执行POST请求的fetchData，避免初始状态下发送意外的GET请求：

useEffect(() => {
  const controller = new AbortController();

  const fetchData = async (fetchOption) => {
    setIsPending(true);

    try {
      const res = await fetch(url, {
        ...fetchOption,
        signal: controller.signal,
      });
      if (!res.ok) {
        throw new Error(res.statusText);
      }
      const data = await res.json();

      setIsPending(false);
      setData(data);
      setError(null);
    } catch (err) {
      if (err.name === "AbortError") {
        console.log("the fetch was aborted");
      } else {
        setIsPending(false);
        setError("Could not fetch the data");
      }
    }
  };

  if (method === "GET") {
    fetchData();
  }

  // 仅当option存在时才执行POST请求
  if (method === "POST" && option) {
    fetchData(option);
  }

  return () => {
    controller.abort();
  };
}, [url, option, method]);

2. 可选：重置请求状态避免残留问题 #

在useFetch的postData函数中添加data重置逻辑，防止旧数据意外触发跳转：

const postData = (data) => {
  setData(null); // 重置data状态，避免旧数据干扰
  setOption({
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  });
};

3. 验证修复后的流程 #

修改完成后：

• 进入Create页面时，useFetch初始化后option为null，不会触发任何请求，data保持null，可以正常显示表单
• 提交表单时调用postData设置option，useEffect检测到option变化，执行POST请求
• 请求成功后data被更新为新食谱数据，触发Create组件的useEffect跳转至首页
• 再次进入Create页面时，useFetch重新初始化，data为null，不会触发跳转

• 利用useFetch返回的isPending状态，在Create页面添加加载提示，避免用户重复提交
• 利用useFetch返回的error状态，在页面上展示错误提示，提升用户体验

内容的提问来源于stack exchange，提问作者عزوز الحارثي