React使用Recharts时如何重置useState([])存储的图表数据

问题原因 #

• 你现有的getData逻辑是往现有数组追加数据，不是清空后新增：[...currentData, accData]的写法会保留原有所有数据，再把新数据拼接在末尾，自然会同时展示新旧数据。
• 你每次点击按钮都会给socket新增一遍事件监听，没有移除旧监听，会导致同一份数据触发多次更新，进一步加剧数据重复叠加的问题。

修复方案 #

1. 把socket事件监听移到useEffect中，仅在组件挂载时绑定一次，组件卸载时自动移除，避免重复监听：

useEffect(() => {
  socket.on("limits", (limitData) => {
    setLimits(limitData);
  });

  socket.on("test_data", (data) => getData(data));
  
  // 组件卸载时清理监听，避免内存泄漏
  return () => {
    socket.off("limits");
    socket.off("test_data");
  }
}, [])

2. 修改点击逻辑，点击开始测试时先清空现有数据：

const onTestClick = (command) => {
  console.log("On Test Command: ", command);
  // 先清空上一次测试的旧数据
  setData([]);
  socket.emit("Test_Commands", command);
};

3. 如果你收到的test_data是本次测试的全量数据，不需要累计单条数据，可以直接修改getData为全量赋值：

const getData = (accData) => {
  setData(accData);
};

内容的提问来源于stack exchange，提问作者Blake Patterson