reactjs - React Hook useEffect 缺少依赖项 - 问题

Question

我收到了这个错误，我真的无法解决它：

src/api/ConnectApi.js
  Line 25:8:  React Hook useEffect has missing dependencies: 'apiurl', 'dataState', and 'fetch'. Either include them or remove the dependency array. You can also do a functional update 'setDataState(d => ...)' if you only need 'dataState' in the 'setDataState' call  react-hooks/exhaustive-deps

这是我在 ConnectApi.js 中的内容

import axios from 'axios';
import { useEffect, useState } from 'react';

const useCollectData = (url) => {

    useEffect(() => {
        const [fetch, setFetching] = useState({isFetching: false})
        const [dataState, setDataState] = useState({data: []});
        const [apiurl] = useState(url);

                const fetchDataFromApi = async () => {

                    try{
                        setFetching({isFetching: true})
                        const response = await axios.get(apiurl)
                        setDataState({...dataState, data: response.data});
                    }
                    catch (error){
                        setFetching({...fetch, isFetching: true})
                    }
                };
                fetchDataFromApi();
                // eslint-disable-next-line react-hooks/exhaustive-deps
    },[]);
    return [dataState]
};

export default useCollectData

我尝试将 apiurl、dataState 和 fetch 添加到依赖项数组，但它不能解决问题。

标签： reactjs

Answer 1

useState应该在外面声明useEffect。

const [fetch, setFetching] = useState({isFetching: false})
const [dataState, setDataState] = useState({data: []});
const [apiurl] = useState(url);
useEffect(() => {
  const fetchDataFromApi = async () => {

    try{
      setFetching({isFetching: true})
      const response = await axios.get(apiurl)
      setDataState({...dataState, data: response.data});
    }
    catch (error){
      setFetching({...fetch, isFetching: true})
    }
  };
  fetchDataFromApi();
  eslint-disable-next-line react-hooks/exhaustive-deps
},[]);