Sử dụng React HookEffect bị thiếu phụ thuộc: 'fetchData'

Question

bất cứ ai có thể giúp tôi với lỗi này? Trong useEffect, tôi gọi một hàm tạo yêu cầu và chèn phản hồi vào trạng thái 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

Mặc dù ứng dụng đang "chạy", tôi muốn giải quyết cảnh báo sau xuất hiện: " React Hook useEffect có phần phụ thuộc bị thiếu: 'fetchData'. Hãy bao gồm hoặc xóa ma trận phụ thuộc react-hooks / exaustive-deps "

Answer 1

Đó là bởi vì bất cứ khi nào bạn đang sử dụng useEffectvà nếu bạn sử dụng thứ gì đó bên ngoài không sử dụng được Ảnh hưởng. UseEffect cần đảm bảo cập nhật khi nào thì không, đó là lý do tại sao bạn cần chuyển nó vào phần phụ thuộc của nó:

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

Cách tốt hơn nếu bạn chỉ cần useEffectđặt fetchDatabên trong 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

Chuyển fetchDatanhư một đối số chouseEffect

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