React表单调用e.preventDefault()仍触发页面重载求助

你调用了e.preventDefault()但页面仍然重载，核心可能有以下两个原因：

1. 未选中对话时触发无效请求导致后端重定向 #

你的useSendMessage Hook中直接使用selectedConversation._id拼接请求URL，但如果用户还未选择任何对话（selectedConversation为null），会抛出Cannot read properties of null (reading '_id')错误。更关键的是，若后端对这类无效请求（比如URL中包含undefined）返回重定向状态码（3xx），浏览器会自动执行跳转——这属于网络层面的行为，会绕过e.preventDefault()的阻止逻辑。

2. 极端情况下的未拦截异常（可能性较低） #

虽然sendMessage函数用try/catch包裹了请求，但如果selectedConversation为null时的属性访问错误在try块执行初期抛出，理论上会被捕获，但极端环境下可能存在未处理的异常导致代码流程异常（不过你提到控制台无错误，这个可能性较小）。

解决方案 #

方案1：添加对话选中校验，从源头阻止无效请求

在发送消息前先检查selectedConversation是否存在，避免触发错误请求：

修改SearchInput组件的handleMessageSend：

import useConversations from "../../zustand/useConversations";

const SearchInput = () => {
  const { loading, sendMessage } = useSendMessage();
  const [message, setMessage] = useState("");
  // 新增：获取选中的对话状态
  const { selectedConversation } = useConversations();

  const handleMessageSend = async (e) => {
    e.preventDefault();

    if (!message) return;
    // 校验：确保已选中对话
    if (!selectedConversation) {
      toast.error("请先选择一个对话");
      return;
    }
    await sendMessage(message);
    setMessage("");
  };

  // 其余代码不变
};

或者直接在useSendMessage的sendMessage函数中添加校验：

const sendMessage = async (message) => {
  try {
    // 先检查是否选中对话
    if (!selectedConversation) {
      throw new Error("请先选择对话");
    }
    setLoading(true);
    const res = await fetch(
      `/api/messages/send/${selectedConversation._id}`,
      {
        method: "POST",
        headers: {
          "Content-type": "application/json",
        },
        body: JSON.stringify({ message }),
      }
    );
    const data = await res.json();
    if (data.error) throw new Error(data.error);

    setMessages([...messages, data]);
  } catch (error) {
    toast.error(error.message);
  } finally {
    setLoading(false);
  }
};

方案2：阻止浏览器自动跟随重定向

如果后端确实会返回重定向，可在fetch中添加redirect: 'manual'选项，手动处理跳转逻辑：

const res = await fetch(
  `/api/messages/send/${selectedConversation._id}`,
  {
    method: "POST",
    headers: {
      "Content-type": "application/json",
    },
    body: JSON.stringify({ message }),
    redirect: 'manual' // 禁止浏览器自动跳转
  }
);

// 手动处理重定向情况
if (res.type === 'opaqueredirect') {
  toast.error("请求异常，请检查登录状态");
  // 如需跳转可手动执行：window.location.href = "/login";
  return;
}

方案3：兜底添加事件传播阻止（可选）

虽然可能性极低，但可以在handleMessageSend中添加e.stopPropagation()，防止父元素事件干扰：

const handleMessageSend = async (e) => {
  e.preventDefault();
  e.stopPropagation(); // 新增这一行

  if (!message) return;
  if (!selectedConversation) {
    toast.error("请先选择一个对话");
    return;
  }
  await sendMessage(message);
  setMessage("");
};

验证步骤 #

1. 打开浏览器开发者工具的网络面板，提交表单时观察POST请求的响应状态码，确认是否存在重定向；
2. 在提交前故意不选择对话，查看是否弹出错误提示而非触发请求；
3. 确认修改后表单提交不再触发页面重载。

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