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;

Answer 1

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

console.log(list);

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

}, [term]);

自

}, [term, list]);

Answer 2

您可以通过编写以下内容来禁用 lint 警告：

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

Answer 3

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

eslint-disable-next-line

Answer 4

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

然后，您无需将变量放在dependency arraylist中。

useEffect(() => {
// do some
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [term]);

Answer 5

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