Question

除非我弄错了，否则这是有效的代码：

useEffect(() => {
   if (prop1) {
      doSomething();
   }
}, []);

（prop1是一个prop）。但是在整理棉布时，出现以下错误：

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

（反应挂钩/穷尽下降）

我不想将prop1作为依赖项传递，因为我会丢失“仅在安装时运行”的行为。但是我需要访问doSomething（）的支持。

有什么建议吗？

Answer 1

您可能会在这里提出这个问题。[ESLint] Feedback for 'exhaustive-deps' lint rule

尽管我有一种感觉，在这种情况下，如果您确定不希望效果在更新prop1时运行，则应添加eslint“忽略”注释。

在此提出了放松警告的合法理由。 https://github.com/facebook/react/issues/14920#issuecomment-467896512

还要检查您正在运行的插件版本。 https://github.com/facebook/react/issues/14920#issuecomment-468801699

Answer 2

尝试此代码

const usemount = ( functionToDoSomeThing, data ) => {
    useEffect( () => {
        functionToDoSomeThing( data );
    },[] );
};

usemount( console.log, props );

我定义了执行某项功能并将其传递给钩子的函数

在示例中，我使用console.log函数

Answer 3

在写这个问题时，钩子是新的，所以也许您已经知道了，但是如果您或其他人想知道：

React认为，因为您的效果使用prop1的值，所以它“取决于” prop1，并且每当更改时都应重新运行。这就是为什么linter抱怨它没有被列为依赖项。

但是，因为您希望效果仅在“挂载”上运行，所以您希望它使用初始/第一个渲染中prop1的值，并且即使prop1更改也永远不会再次运行。这与数组列出了效果依赖的所有变量的概念概念不一致，后者是linter重点关注的变量。

React Hooks FAQ中提到的解决方案是使用useRef来跟踪这是否是第一个渲染（已编辑）：

const firstRenderRef = useRef(true)

useEffect(() => {
  if (firstRenderRef.current) {
    firstRenderRef.current = false
    doSomething(prop1)
  }
}, [prop1])

此解决方案满足了linter的要求，特别是因为它遵循在阵列中列出效果的所有依赖关系的想法。 ref允许效果也依赖于变量是否是第一个渲染，而在值更改时无需重新渲染。

React钩子：如何在“ mount” useEffect中访问道具并不会发出掉毛警告

3 个答案: