UseEffect将在ReactJS中运行不止一次

Question

useEffect由于某种原因会运行不止一次(通常是两次(，并会打印两次(或更多(我的消息。我尝试过多种解决方案，即使使用了蒙太因效应，但结果总是一样的。有什么解决方案吗？

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

在严格模式下，组件将被安装、卸载，然后重新安装。您可以添加清理功能。但是，需要双重调用。

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

Answer 2

如果你想检查，你可以关闭严格模式，并检查useEffect回调函数运行的确切次数

注意：但不要总是关闭严格模式，因为

-->严格模式实际上是因为如果我们忘记了useEffect中的任何清理功能，ui的行为就会与不同

-->只有我们才知道我们犯了错误

-->严格模式只存在于开发模式中，不会出现在生产模式中