从反应严格模式中获取“未捕获的类型错误：message.split不是函数”，即使该函数工作得很好

Question

我有一个事件侦听器，我在初始页面渲染时在组件内创建它，如下所示：

  useEffect(() => {
    // once response recieved from getCommentTimestamp, invoke postComment
      window.addEventListener('message', (e) => {
        const message = e.data;
        if (message.split('/')[0] === 'timeStamp') {
          const timeStamp = message.split('/')[1];
          console.log(timeStamp);
        }
      });
  }, []);

事件监听器工作正常。当我将消息发送到窗口时，我得到了想要记录到控制台的数据。但我担心在这里反应抛出误报可能表明存在其他类型的问题。我这里的实现有问题吗？在 useEffect 挂钩中创建事件侦听器是不好的做法吗？

Answer 1

在 useEffect 挂钩中使用事件侦听器通常是可接受的做法，但有一些注意事项： 内存泄漏：确保在组件卸载时删除事件侦听器，以避免内存泄漏问题。您可以从 useEffect 返回一个清理函数，以在组件卸载时执行删除操作。 依赖数组：如果事件侦听器的回调函数依赖于 useEffect 外部的变量或状态，请确保将这些变量包含在依赖数组中，以便正确捕获最新值。 性能优化：如果事件监听器只需要在挂载时设置一次并在卸载时删除一次，可以将空数组[]作为useEffect的第二个参数传递。这样，事件侦听器将在组件安装期间仅设置一次，并在卸载期间删除。 在您的代码中，您似乎已经通过传递一个空数组 [] 作为 useEffect 的依赖数组来考虑第三点，这是一个很好的做法。只需确保在组件卸载时删除事件侦听器并根据需要优化性能即可。您的实施看起来很合理。