java - 服务器发送的事件在传入 React 时会成倍增加

Question

我有一个简单的 Java Spring 应用程序，它使用服务器发送的事件将数据发送到前端 React 应用程序。这是后端的编写方式:

 @GetMapping(value = "/plot", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public Flux get() {
        return Flux.interval(Duration.ofMillis(1000))
                .map(interval ->
                        currentStateMapper.map(eventRepository.getAll()).stream()
                                .map(plotDataMapper::map)
                                .collect(Collectors.toList())
                );
    }

这所做的可能不太重要，但想法是我存储最近的事件，存储库为我提供所有存储的事件(它们存储在 infinispan 缓存中)，然后我使用一些映射器来获取当前状态然后将其映射到适合使用 XY 图进行可视化的对象。

它应该每秒向前端发送一条包含绘图数据的消息。当我使用浏览器(Chrome)打开端点时，它就像一个魅力。每秒都会看到一个新的 JSON 出现。但是，当我使用 React 的事件源接收消息而不是每秒 1 条消息时，我每秒收到 6 条相同的消息。这是前端实现:

const Component = () => {
  const plotDataEventSource = new EventSource(
    "http://localhost:8080/tags/plot/antenna"
  );

  useEffect(() => {
    plotDataEventSource.onmessage = e => {
      console.error(e)

      setData(prevState => {
       /* some data handling */ 
        return newState;
      });
    };
  });

  return ( /* html with plot */ );
}

因此 console.error() 每秒记录 6 次，相同的对象。造成这种行为的原因是什么？

Answer 1

useEffect 将在每次渲染时触发回调 - 如果您希望它的行为类似于 componentDidMount，您应该传递一个空数组作为第二个参数。

第二个参数是值数组(通常是 props):

1. 如果数组中的任何值发生变化，回调将被触发 每次渲染后。
2. 当它不存在时，回调将始终在每次之后触发 渲染。
3. 当它是空列表时，回调只会被触发一次， 类似于componentDidMount。