React 表单提交导致页面重新加载，尽管使用了 e.preventDefault() https://github.com/hatimb03/Murmur---chat-app.git

Question

我正在开发一个 React 组件，其表单使用自定义钩子发送消息。尽管在表单的 onSubmit 处理程序中使用了 e.preventDefault()，但每次提交表单时页面都会重新加载，这会中断我的调试过程并重置状态。我已验证 e.preventDefault() 是否被正确调用，并且页面上没有其他表单或提交按钮可能导致此行为。我在控制台中没有看到任何可以解释此问题的 JavaScript 错误。我还检查了表单设置是否正确，按钮类型为“提交”。 这是组件

`

import { FaSearch } from "react-icons/fa";
import useSendMessage from "../../hooks/useSendMessage";
import { useState } from "react";

const SearchInput = () => {
  const { loading, sendMessage } = useSendMessage();
  const [message, setMessage] = useState("");

  const handleMessageSend = async (e) => {
    e.preventDefault(); // Prevents default page reload

    if (!message) return;
    await sendMessage(message);
    setMessage("");
  };

  return (
    <form onSubmit={handleMessageSend}>`
      <input`
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="Type a message"
      />
      <button type="submit">
        {loading ? <span>Loading...</span> : <FaSearch />}
      </button>
    </form>
  );
};

export default SearchInput;`

任何见解都会有帮助

我尝试过的：

我设置了一个带有 onSubmit 处理程序的 React 表单，该处理程序调用 e.preventDefault() 来阻止页面重新加载。我实现了一个自定义挂钩来处理通过 API 发送消息。我还验证了表单配置是否正确，提交按钮类型设置为“提交”。

我的期望：

我希望表单能够异步提交消息，而无需重新加载页面。状态应使用新消息进行更新，并且输入字段应重置为空字符串。

实际发生的事情：

尽管调用了 e.preventDefault()，每次提交表单时页面仍然会重新加载，这会重置组件状态并中断表单提交过程。我无法正确调试问题，因为页面重新加载使我无法查看控制台日志或跟踪状态更改。

这是我的useSendMessage

import toast from "react-hot-toast";
import useConversations from "../zustand/useConversations";
import { useState } from "react";

const useSendMessage = () => {
  const [loading, setLoading] = useState(false);
  const { messages, setMessages, selectedConversation } = useConversations();

  const sendMessage = async (message) => {
    try {
      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);
    }
  };

  return { loading, sendMessage };
};

export default useSendMessage;

这里是祖斯坦

import { create } from "zustand";

const useConversations = create((set) => ({
  selectedConversation: null,
  setSelectedConversation: (selectedConversation) =>
    set({ selectedConversation }),
  messages: [],
  setMessages: (messages) => set({ messages }),
}));

export default useConversations;

Answer 1

您没有将事件传递给

handleMessageSend

函数。

更改此行，它应该可以工作：

onSubmit={(e) => handleMessageSend(e)}