React Hook useEffect报缺失'props'依赖错误，因调用props下的状态更新方法

问题根因 #

React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array.

这个报错的核心原因是你在useEffect内直接通过props.xxx的方式引用属性，ESLint的react-hooks/exhaustive-deps规则会判定你依赖了整个props对象，而你只把props.firstInputValue加入了依赖数组，因此触发警告。如果直接把整个props加入依赖数组，会导致任意prop变化时这个useEffect都会重新执行，不符合预期。

正确解决步骤 #

• 第一步：在函数组件的顶层位置，把useEffect中用到的props属性提前解构出来，不要在useEffect内部直接引用props对象
• 第二步：将useEffect中用到的所有外部变量（包括解构后的props属性、状态更新函数、工具函数）都加入依赖数组

代码示例 #

首先在组件顶层完成props解构：

// 函数组件顶部提前解构所需的props属性
const { firstInputValue, setFirstFinalSetArray } = props;
// 你的内部状态定义示例
const [firstPrintArray, setFirstPrintArray] = useState('');

修改后的useEffect代码：

useEffect(() => {
  const trimmedArray = trimArray(firstInputValue);
  setFirstFinalSetArray(trimmedArray);
  setFirstPrintArray(`{${trimmedArray.join(', ')}}`);
}, [firstInputValue, setFirstFinalSetArray, setFirstPrintArray, trimArray]);

补充说明 #

• 无论是当前组件内部的setFirstPrintArray，还是父组件传递的setFirstFinalSetArray，只要是useState返回的状态更新函数，React会保证它们的引用永久稳定，加入依赖数组后不会导致useEffect额外执行
• 如果trimArray是组件外部定义的纯工具函数，你可以直接将它移到组件代码外定义，就不需要将它加入依赖数组；如果trimArray是组件内部定义的函数，使用useCallback包裹它保证引用稳定即可。
• 不推荐直接使用// eslint-disable-next-line react-hooks/exhaustive-deps注释关闭校验，容易引发闭包相关的逻辑bug。

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