Pusher 每次提交消息都会触发两次消息发送

使用 Pusher 框架构建的聊天应用程序出现了一个问题，每次用户提交消息时都会触发两次消息发送。尽管代码中没有重复调用任何函数，但问题仍然存在。应用程序使用 React 和 Golang 开发，已排除函数重复调用的可能性。问题根源尚未找到，但怀疑可能是由于 React 严格模式导致的页面渲染两次，从而导致 useEffect 函数运行两次。

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

我正在使用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")
}

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

正确答案

好的，我明白了。我将 App.js 封装在 index.js 中的 React Strict 模式中。它导致我的页面渲染两次，useEffect 函数运行了两次。因此，如果有人遇到此问题，请确保您没有使用 React 严格模式

终于介绍完啦！小伙伴们，这篇关于《Pusher 每次提交消息都会触发两次消息发送》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布Golang相关知识，快来关注吧！