React Hook useEffect存在一个缺失的依赖项: 'list'。

Question

运行以下代码后，我会收到以下错误：

React Hook useEffect 的依赖缺失：'list'。请在依赖项数组中包含它或删除该依赖项 react-hooks/exhaustive-deps

我找不到警告的原因。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Form from './Form';

const App = () => {
  const [term, setTerm] = useState('pizza');
  const [list, setList] = useState([]);

  const submitSearch = e => {
    e.preventDefault();
    setTerm(e.target.elements.receiptName.value);
  };

  useEffect(() => {
    (async term => {
      const api_url = 'https://www.food2fork.com/api';
      const api_key = '<MY API KEY>';

      const response = await axios.get(
        `${api_url}/search?key=${api_key}&q=${term}&count=5`
      );

      setList(response.data.recipes);
      console.log(list);
    })(term);
  }, [term]);

  return (
    <div className="App">
      <header className="App-header">
        <h1 className="App-title">Recipe Search</h1>
      </header>
      <Form submitSearch={submitSearch} />
      {term}
    </div>
  );
};

export default App;

- user1941537

Answer 1

在您的 useEffect 中，您正在记录 list：

console.log(list);

所以你需要删除以上的那行代码，或者在 useEffect 的依赖项末尾添加 list。

因此修改这行代码：

}, [term]);

到

}, [term, list]);

- Arjen de Vries

---

在 useEffect 内部定义变量，但不将其添加到依赖项数组中，是否是一种不良实践？例如在使用空依赖项数组来模拟 componentDidMount 的情况下。 - akmalmzamri

这有点取决于情况。根据官方文档 https://reactjs.org/docs/hooks-effect.html，添加一个空数组告诉React该钩子不依赖于任何道具或状态更改。因此，如果您可以100％确定那些变量的值将来不会改变（例如，因为它们不是从状态或道具派生的），或者当您只想在编写的钩子中忽略这些变化时，您可以将它们省略掉。 - Arjen de Vries

Answer 2

您可以通过写入以下内容来禁用代码检查警告：

您可以通过编写以下方法来禁用代码检查警告：

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [term]);

- Diego Cerdan Puyol

---

这并没有禁用警告。 - Asma Rahim Ali Jafri

Answer 3

您可以通过插入注释来禁用此功能。

// eslint-disable-next-line

- Oteri Eyenike

---

这并没有禁用警告。 - Asma Rahim Ali Jafri

对我有用。该注释需要添加在空依赖列表所在的行上方。 - maxorcist

@AsmaRahimAliJafri 对于这两个注释... 这肯定会禁用警告。而 @all：我永远不会在代码审查中批准disable-next-line。它意味着“我不关心我的代码在做什么，所以我放弃了”。那不是编写代码的方式。此规则仅存在于...好问题... 啊：如果您正在生成代码（例如AST）并生成随机警告^^否则无法想象任何有用的场景。 - faebster

Answer 4

dependency array(依赖数组)是useEffect(效果钩子)函数的第二个可选参数。如果在dependency array(依赖数组)中的参数在前一次渲染时与当前不同，React将重新调用useEffect(效果钩子)函数中定义的第一个参数的函数。

因此，您不需要将list(列表)变量放置在dependency array(依赖数组)中。

  useEffect(() => {
    // do some

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [term]);

- Pavel Petrovich

Answer 5

这个警告是因为你在 useEffect 中使用了状态 'list'。React 告诉你，'list' 没有被添加到依赖项中，所以对 'list' 状态的任何更改都不会再次触发此 effect。
你可以在这里找到更多帮助。

- harshit