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

Question

推送者在提交时发送消息两次。我没有看到任何函数被重复或调用两次，但这仍然会发生

我正在使用 React v18.1.0 我正在使用 Golang 1.18

import 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