React Hook useEffect 缺少依赖项：[重复]

Question

我正在构建一个带有 react 的 webapp，我收到了这个警告：

src\Containers\App.js
  Line 30:6:  React Hook useEffect has a missing dependency: 'API_KEY'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
  Line 36:6:  React Hook useEffect has a missing dependency: 'API_KEY'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

这里是 App.js 代码：

import React, { useState, useEffect } from 'react';
import './App.css';
import 'tachyons';

const App = () => {

  const API_KEY = `...`;

  const [searchField, setSearchField] = useState('');
  const [countryField, setCountryField] = useState('');  
  const [currentData, setCurrentData] = useState(null); 
  const [oneCallData, setOneCallData] = useState(null); 

  useEffect(() => { 
    fetch(`https://api.openweathermap.org/data/2.5/weather?q=Cinisi&units=metric&appid=${API_KEY}`)
      .then(resp => resp.json())
      .then(dataRecived => {
        setCurrentData(dataRecived);
      })
  }, []);

  useEffect(() => {
    fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=38.1562&lon=13.1073&units=metric&exclude=current,minutely,alerts&appid=${API_KEY}`)
      .then(resp => resp.json())
      .then(dataRecived => setOneCallData(dataRecived))
  }, []);
...


  

提前感谢任何试图给我答案的人

Answer 1

我建议这种类型的重构： 组件应该只有一个 useEffect。

fetchData1 和 fetchData2 应该有更有意义的名称。

  const fetchData1 = useCallback(() => {
    fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=38.1562&lon=13.1073&units=metric&exclude=current,minutely,alerts&appid=${API_KEY}`)
      .then(resp => resp.json())
      .then(dataRecived => setOneCallData(dataRecived))
  }, [API_KEY]);

  const fetchData2 = useCallback(() => {
    fetch(`https://api.openweathermap.org/data/2.5/weather?q=Cinisi&units=metric&appid=${API_KEY}`)
      .then(resp => resp.json())
      .then(dataRecived => {
        setCurrentData(dataRecived);
      })
  }, [API_KEY]);


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