React Hook useEffect มีการอ้างอิงที่ขาดหายไป: 'fetchData'

Question

ใครสามารถช่วยฉันเกี่ยวกับข้อผิดพลาดนี้ ในuseEffectฉันเรียกใช้ฟังก์ชันที่ส่งคำขอและแทรกการตอบสนองในสถานะ redux

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

แม้ว่าแอปพลิเคชันจะ "ทำงาน" แต่ฉันต้องการแก้ไขคำเตือนต่อไปนี้ที่ปรากฏขึ้น: " React Hook useEffect มีการอ้างอิงที่ขาดหายไป: 'fetchData' รวมหรือลบเมทริกซ์การอ้างอิง react-hooks / exaustive-deps "

Answer 1

เป็นเพราะเมื่อใดก็ตามที่คุณใช้useEffectและหากคุณใช้สิ่งที่อยู่นอกเหนือจาก useEffect UseEffect จำเป็นต้องตรวจสอบให้แน่ใจว่าจะอัปเดตเมื่อใดจึงไม่ใช่เหตุผลที่คุณต้องส่งต่อในการพึ่งพา:

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);
      })
  }

วิธีที่ดีกว่าถ้าคุณต้องการuseEffectใส่เฉพาะด้านfetchDataใน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

ส่งผ่านfetchDataเป็นอาร์กิวเมนต์ไปยังuseEffect

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