pusher 提交后发送消息两次

Question

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

我正在使用 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>
              <div className="list-group list-group-flush border-bottom scrollarea">
                  {messages.map(message => {
                      return (
                          <div className="list-group-item list-group-item-action py-3 lh-tight">
                              <div className="d-flex w-100 align-items-center justify-content-between">
                                  <strong className="mb-1">{message.username}</strong>
                              </div>
                              <div className="col-10 mb-1 small">{message.message}</div>
                          </div>
                      )
                  })}
              </div>
          </div>
          <form onSubmit={e => submit(e)}>
              <input className="form-control" placeholder="Write a message" value={message}
                     onChange={e => setMessage(e.target.value)}
              />
          </form>
      </div>
  );
}

export default App;

这是我在 Golang 中的后端代码

package main

import (
    "github.com/gofiber/fiber/v2"
    "github.com/gofiber/fiber/v2/middleware/cors"
    "github.com/pusher/pusher-http-go"
)

func main() {
    app := fiber.New()

    app.Use(cors.New())

    pusherClient := pusher.Client{
        AppID:   "1421095",
        Key:     "-",
        Secret:  "-",
        Cluster: "ap2",
        Secure:  true,
    }

    app.Post("/api/messages", func(c *fiber.Ctx) error {
        var data map[string]string

        if err := c.BodyParser(&data); err != nil {
            return err
        }

        pusherClient.Trigger("chat", "message", data)

        return c.JSON([]string{})

    })

    app.Listen(":8000")
}

我在网上搜索了很多，但我真的可以找到解决方案。 以上是我为创建应用程序而编写的所有代码

Answer 1

好，我知道了。 我在 index.js 中以 React Strict 模式包装了我的 App.js。 它导致我的页面呈现 2 次，而 useEffect 函数运行了两次。 因此，如果有人遇到此问题，请确保您没有使用 React Strict Mode