时间戳

首页 > 解决方案 > React-为什么多次调用 useEffect （即使有条件）？

javascript - React-为什么多次调用 useEffect （即使有条件）？

问题描述

4 条消息的示例

我在一个带有反应钩子的简单聊天应用程序上工作。在第二个 useEffect 中，我需要将新消息附加到其余消息中，以便能够在聊天中显示所有消息。现在，我只能在从数组长度调用 x2 后才能附加消息。例如：在第四条消息中，UseEffect 将在数组完成之前执行 8 次。

注意：在 useEffect 我 setAllMessages 两次但只有一个正在执行，这很好取决于它是否是发件人的接收者（所以我不认为这是问题）


function Chat() {
  const [message, setMessage] = useState("");
  const [userName] = useState(
    JSON.parse(atob(localStorage.getItem("token").split(".")[1])).name
  );
  const [userTyping, setUserTyping] = useState(null);
  const [allMessages, setAllMessages] = useState([]);

  useEffect(() => {
    socket.emit("join", userName);
    socket.on("chat-message", data => {
      toast(`Hello ${data}`);
    });
    socket.on("user-joined", data => {
      toast(`${data} joined the chat`);
    });
  }, [userName]);

  useEffect(() => {                             // the problem is here
    function handleAllMessages(data) {
      setAllMessages([...allMessages, data]);
      console.log(allMessages);
    }
    socket.on("broadcast-message", data => {
      handleAllMessages(data);
    });
    socket.on("my-message", data => {
      data["userName"] = "You";
      handleAllMessages(data);
    });
  }, [allMessages]);

  useEffect(() => {
    socket.on("who-typing", data => {
      setUserTyping(data);
      setTimeout(() => {
        setUserTyping(null);
      }, 2500);
    });
  }, [userTyping]);

  useEffect(() => {
    socket.on("user-disconnected", data => {
      toast(`${data} left the chat`);
    });
  }, []);

  function handleChat(e) {
    e.preventDefault();
    if (message.trim() === "") return toast.warn("not valid message");
    socket.emit("user-message", message, userName);
    setMessage("");
  }

  function handleChange(e) {
    setMessage(e.target.value);
    socket.emit("typing", userName);
  }

  return (...

标签： javascriptarraysreactjssocket.io

解决方案

第二个useEffect将被执行多次的原因 - 我想是无限的 - 是因为你告诉它每次allMessages更改都执行，因为它在数组中 - 的第二个参数useEffect。

在其中传递该数组allMessages将导致useEffect每次allMessages更改时重新运行，这实际上是您在useEffect调用handleAllMessages函数时在内部执行的操作。

阅读有关此内容。

推荐阅读