UseEffect 將在 ReactJS 中運行不止一次

Question

由於某種原因，useEffect 會運行不止一次（通常是兩次），並且會打印我的消息兩次（或更多次）。 即使使用 useMontainEffect，我也嘗試了多種解決方案，但結果始終相同。 有什么解決辦法嗎？

import './App.css';
import io from 'socket.io-client'
import { useEffect, useRef, useState } from 'react'
import React from 'react';
import ReactDOM from "react-dom/client";


const socket = io.connect("http://localhost:3001");

function App() {
  const [message, setMessage] = useState("");
  const [state, setState] = useState([]);
  const [chat, setChat] = useState([]);
  const socketRef = useRef();
  const sendMessage = () => {
    socket.emit("send_message", { message });
  };

  const renderChat = () => {
    return (
        chat.map(msg => {
            return (
                <h3>{msg.message['message']}</h3>
            )
        })
    )
}


useEffect(() => {
  socket.on("receive_message", message => {
    setChat(prevState => [...prevState, {message}]);
  });
}, [socket])


  return (
    <div className="App">
      <input placeholder="Message..." onChange={(event) => {
        setMessage(event.target.value);}}
        />
      <button onClick={sendMessage}>Send Message</button>
      <h1>Message:</h1>
      {renderChat()}
    </div>
  );
}

export default App;

Answer 1

在嚴格模式下，組件將被安裝、卸載，然后重新安裝。 您可以添加清理 function。 然而，雙重調用是預期的。

useEffect(() => {
  const listener = message => {
    setChat(prevState => [...prevState, {message}]);
  };
  socket.on("receive_message", listener);
  return () => socket.off('receive_message', listener);
}, [socket])

Answer 2

如果你想檢查，你可以關閉嚴格模式並檢查 useEffect 回調 function 運行了多少次

注意：但不要總是關閉嚴格模式，因為

--> 嚴格模式實際上是因為如果我們在 useEffect 中忘記了任何清理 function，ui 的行為會有所不同

--> 只有這樣我們才知道我們做錯了什么

--> 嚴格模式僅存在於開發模式中，不會出現在生產模式中