gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 01:26:35 24 4
gpt4 key购买 nike

我有一个简单的 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 次,相同的对象。造成这种行为的原因是什么?

最佳答案

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

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

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

关于java - 服务器发送的事件在传入 React 时会成倍增加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56817301/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com