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

IT技术 reactjs react-hooks
2021-04-16 06:48:24

运行以下代码后,我收到以下错误:

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;
5个回答

在您的 useEffect 中,您正在记录list

console.log(list);

所以你要么需要删除上面的行,要么list在最后添加到 useEffect 依赖项。所以改变这一行

}, [term]);

}, [term, list]);
在 useEffect 中包含变量但不将它们添加到依赖项数组中是一种不好的做法吗?例如,当您使用空的依赖项数组来模拟 componentDidMount 时
2021-06-10 06:48:24
嗯,这取决于一点。从官方文档reactjs.org/docs/hooks-effect.html添加一个空数组告诉 React 钩子不依赖于任何道具或状态变化。因此,如果您 100% 确定这些变量的值以后不会改变(例如,因为它们不是从 state 或 prop 派生的),或者当您根本不关心这些变量时,您可以将它们排除在外你写的钩子的变化。
2021-06-11 06:48:24

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

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [term]);
这并没有禁用警告。
2021-05-25 06:48:24

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

// eslint-disable-next-line

为我工作。注释需要添加在具有空依赖项列表的行的正上方。
2021-06-18 06:48:24
这并没有禁用警告。
2021-06-19 06:48:24

dependency array-这是在第二个可选参数useEffect的功能。useEffect如果里面的参数dependency array与之前的渲染相比发生了变化,React 将调用函数的第一个参数中定义的函数

然后你不需要list在里面放置变量dependency array

  useEffect(() => {
    // do some

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

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