React Hook useEffect hat eine fehlende Abhängigkeit: 'fetchData'

Question

kann mir jemand bei diesem fehler helfen? In useEffect rufe ich eine Funktion auf, die eine Anfrage stellt und die Antwort in einem Redux-Zustand einfügt.

import React, { useEffect, useState } from "react";
import { BrowserRouter as Router, Switch, Route} from "react-router-dom";
import { useDispatch, useSelector } from 'react-redux'
import { actions } from './actions/actions'
import { I18nProvider } from './i18n'
import axios from 'axios'

import Home from './views/home/home';
import Page1 from './views/page1/page1';
import Page2 from './views/page2/page2'
import Page3 from './views/page3/page3'

const App = () => {

  const [isLoading, setIsLoading] = useState(true)

  const localeDefault = useSelector(state => state.audioGuideReducers.lang)

  const dispatch = useDispatch()
  const setDataRedux= (data) => dispatch(actions.setDataRedux(data))

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    await axios.get('https://link-api.com/alldata')
      .then((response) => {
        setDataRedux(response.data.data)
        setIsLoading(false)
      })
      .catch( (error) => {
        console.log(error.message);
      })
  }

  return (
    <I18nProvider locale={localeDefault}>
      <Router>
        {
          isLoading ?
            <h1> Loading... </h1>
            :
            <Switch>
              <Route path="/page3/:id" component={Page3} />
              <Route path="/page2" component={Page2} />
              <Route path="/page1" component={Page1} />
              <Route path="/" component={Home} />
            </Switch>
        }
      </Router>
    </I18nProvider>
  );
}

export default App

Obwohl die Anwendung "ausgeführt" wird, möchte ich die folgende Warnung beheben, die angezeigt wird: " React Hook useEffect hat eine fehlende Abhängigkeit: 'fetchData'. Fügen Sie sie ein oder entfernen Sie die Abhängigkeitsmatrix" react-hooks / exaustive-deps ".

Answer 1

useEffectDies liegt daran, wann immer Sie etwas verwenden und was Sie außerhalb von useEffect verwenden. UseEffect muss sicherstellen, wann aktualisiert werden muss, wenn dies nicht der Fall ist. Deshalb müssen Sie es in seiner Abhängigkeit übergeben:

useEffect(() => {
    fetchData();
  }, [fetchData]);

  const fetchData = async () => {
    await axios.get('https://link-api.com/alldata')
      .then((response) => {
        setDataRedux(response.data.data)
        setIsLoading(false)
      })
      .catch( (error) => {
        console.log(error.message);
      })
  }

Besserer Weg , wenn Sie nur nach innen brauchen useEffectsetzen fetchDatainnen useEffect:

const setDataRedux = React.useCallback((data) => dispatch(actions.setDataRedux(data)), [])
useEffect(() => {
    const fetchData = async () => {
    await axios.get('https://link-api.com/alldata')
      .then((response) => {
        setDataRedux(response.data.data)
        setIsLoading(false)
      })
      .catch( (error) => {
        console.log(error.message);
      })
  }
    fetchData();
  }, [setDataRedux]);

  

Answer 2

Übergeben Sie fetchDataals ArgumentuseEffect

 useEffect(() => {
    fetchData();
  }, [fetchData]);