为什么这个 useEffect 依赖项（正在使用）是不必要的？（Eslint 日志）

Question

我正在开发这个使用 websockets 的 React 应用程序，首先，一些背景信息：

我有一个 fooArray，用户可以用钩子改变它，我有一个 socket，它在挂载时改变。现在，我得到了以下代码，// foo array change listener 就是我正在谈论的代码。为了更容易理解，我包括了其他的

// socket ref
const socket = useRef(null);

// foo array change listener
useEffect(() => {
  // this === null is there to prevent emitting on something that's null,
  // if another way is possible too, please let me know.
  if (socket.current === null) return;
  socket.current.emit('foos', JSON.stringify(fooArray));
}, [fooArray, socket.current]);

// socket connection on mount
useEffect(() => {
  socket.current = ioClient(WS_URI);
}, []);

现在的问题是，如果我从 fooArray change listener 的依赖数组中删除 socket.current，当连接 websocket 时，useEffect 钩子将不会执行并且不会发生 emit 事件.

我如何使用它使 socket.current 成为依赖项数组的一部分而不是未被使用..？

Answer 1

useEffect 钩子按照它们被写入的顺序执行，前提是它们的依赖数组导致它们运行（将在初始渲染时使用 Effects 钩子运行）

由于您已经在 useEffect 中初始化了套接字，post 另一个使用套接字的 useEffect，因此在初始渲染时您将没有套接字实例。

改变 useEffect 的顺序对你有用

// socket ref
const socket = useRef(null);

// socket connection on mount
useEffect(() => {
  socket.current = ioClient(WS_URI);
}, []);

// foo array change listener
useEffect(() => {
  socket.current.emit('foos', JSON.stringify(fooArray));
}, [fooArray]);

为什么这个 useEffect 依赖项（正在使用）是不必要的？（Eslint 日志）

Why is this useEffect dependency (which is being used) unnecessary? (Eslint log)

socket.io

reactjs

react-hooks

use-effect

为什么这个 useEffect 依赖项（正在使用）是不必要的？ （Eslint 日志）

Why is this useEffect dependency (which is being used) unnecessary? (Eslint log)

socket.io

reactjs

react-hooks

use-effect

为什么这个 useEffect 依赖项（正在使用）是不必要的？（Eslint 日志）