React Hook useEffect缺少依赖:'list'

问题描述 投票:0回答:2

一旦我运行波纹管代码,我收到以下错误:

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;
reactjs react-hooks
2个回答
2
投票

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

console.log(list);

因此,您需要删除上面的行,或者在最后将list添加到useEffect依赖项。所以改变这一行

}, [term]);

}, [term, list]);

1
投票

这个警告是因为你在useEffect中使用了一个状态'list'。因此,反应警告您“list”未添加到依赖项中,因此对“list”状态的任何更改都不会触发此效果再次运行。 你可以找到更多帮助here

© www.soinside.com 2019 - 2024. All rights reserved.