React Hook useEffect 缺少依赖项：'list'

Posted 2023-02-21

【中文标题】React Hook useEffect 缺少依赖项：\'list\'

【英文标题】：React Hook useEffect has a missing dependency: 'list'React Hook useEffect 缺少依赖项：'list'

【发布时间】：2019-09-20 04:11:56

【问题描述】：

运行以下代码后，出现以下错误：

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;

【参考方案1】：

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

console.log(list);

因此，您要么需要删除上述行，要么将list 添加到最后的useEffect 依赖项中。 所以改变这一行

, [term]);

到

, [term, list]);

【讨论】：

在 useEffect 中包含变量但不将它们添加到依赖项数组中是一种不好的做法吗？例如当你使用空依赖数组来模拟 componentDidMount

嗯，这取决于一点。从官方文档reactjs.org/docs/hooks-effect.html 添加一个空数组是告诉 React 钩子不依赖于任何道具或状态更改。因此，如果您 100% 确定这些变量的值以后不会改变（例如，因为它们不是从 state 或 prop 派生的），或者当您根本不关心这些变量时，您可以将它们排除在外你写的钩子的变化。

【参考方案2】：

您可以通过以下方式禁用 lint 警告：

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

【讨论】：

这并没有禁用警告。

【参考方案3】：

您可以通过插入评论来禁用此功能

// eslint-disable-next-line

【讨论】：

这并没有禁用警告。

为我工作。需要将注释添加到具有空依赖项列表的行的正上方。

【参考方案4】：

dependency array - 它是useEffect 函数中的第二个可选参数。如果 dependency array 中的参数与之前的渲染相比，React 将调用在 useEffect 函数的第一个参数中定义的函数。

那么你不需要将list变量放在dependency array中。

  useEffect(() => 
    // do some

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

【参考方案5】：

出现此警告是因为您在 useEffect 中使用了一个状态“列表”。因此，react 会警告您“列表”未添加到依赖项中，因此对“列表”状态的任何更改都不会触发此效果再次运行。 您可以找到更多帮助here