推送器在提交一次时发送两次消息

Question

推送者在提交时发送消息两次。我没有看到任何函数被重复或调用两次，但这仍然会发生我正在使用 React v18.1.0 我正在使用 Golang 1.18import React, { useState, useEffect } from "react";import Pusher from "pusher-js";function App() {  const [username, setUsername] = useState('username');  const [messages, setMessages] = useState([]);  const [message, setMessage] = useState('');  let allMessages = [];  useEffect(() => {      Pusher.logToConsole = true;      const pusher = new Pusher('-', {          cluster: '-'      });      const channel = pusher.subscribe('chat');      channel.bind('message', function (data) {          allMessages.push(data);          setMessages(allMessages);      });  }, []);  const submit = async e => {      e.preventDefault();      await fetch('http://localhost:8000/api/messages', {          method: 'POST',          headers: {'Content-Type': 'application/json'},          body: JSON.stringify({              username,              message          })      });      setMessage('');  }  return (      <div className="container">          <div className="d-flex flex-column align-items-stretch flex-shrink-0 bg-white">              <div                  className="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">                  <input className="fs-5 fw-semibold" value={username}                         onChange={e => setUsername(e.target.value)}/>              </div>              

Answer 1

好，我知道了。我将我的 App.js 包裹在 index.js 中的 React Strict Mode 中。这导致我的页面渲染 2 次，因为 useEffect 函数运行了两次。因此，如果有人遇到此问题，请确保您没有使用 React Strict Mode