По какой-то причине 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;

0
Venoz 27 Сен 2022 в 21:17
Это вызвано строгим режимом. Отключите его и повторите попытку.
 – 
Nirmal Kumar
27 Сен 2022 в 21:21
Отключение строгого режима - это именно то, чего вам не следует делать
 – 
Konrad Linkowski
27 Сен 2022 в 21:24
Спасибо, ребята, это сработало!
 – 
Venoz
27 Сен 2022 в 21:24

2 ответа

В строгом режиме компонент будет монтироваться, размонтироваться, а затем снова монтироваться. Вы можете добавить функцию очистки. Однако ожидается двойной вызов.

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

1
aziz punjani 27 Сен 2022 в 21:26

Если вы хотите проверить, вы можете отключить строгий режим и точно проверить, сколько раз выполняется функция обратного вызова useEffect.

Примечание: не всегда отключайте строгий режим, потому что

--> строгий режим на самом деле потому, что если мы забыли какую-либо функцию очистки в useEffect , пользовательский интерфейс ведет себя по-другому

--> с этим только мы узнали, что сделали что-то не так

--> строгий режим присутствует только в режиме разработки, его не будет в режиме производства

0
lucky 27 Сен 2022 в 21:58