如何解决React中“数组导致useEffect Hook依赖变更”的编译警告？

问题根源 #

你直接用let fArray: Stuff[] = [...stuff]声明数组时，每次组件渲染都会创建一个新的数组引用，导致useEffect的依赖项fArray每次都变，触发了react-hooks/exhaustive-deps警告。

正确的useMemo写法 #

你之前的错误是把TypeScript类型Stuff[]当作值使用了，正确的做法是在useMemo的回调里返回新数组，同时给变量指定类型，还要把stuff加入依赖项（因为fArray是基于stuff生成的）：

// 正确写法
const fArray: Stuff[] = useMemo(() => {
  return [...stuff];
}, [stuff]); // 只有当stuff变化时，才重新生成fArray

如果你的TypeScript版本支持自动推断，也可以省略手动类型声明，让TS自己识别：

const fArray = useMemo(() => [...stuff], [stuff]);

完整使用示例 #

修改后你的代码应该是这样的：

// 用useMemo缓存数组
const fArray: Stuff[] = useMemo(() => [...stuff], [stuff]);

useEffect(() => {
  // 其他代码....

  dispatch(setStuff([fArray[0].id]));
  
}, [dispatch, fArray]); // 现在可以去掉eslint-disable注释了

补充说明 #

• useMemo的第二个参数是依赖数组，只有当数组里的变量发生变化时，才会重新执行回调函数生成新的fArray。
• 这样修改后，fArray的引用只有在stuff变化时才会更新，不会每次渲染都变，也就解决了useEffect的依赖警告。

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