React Hook useEffect 缺少依赖项 - 问题答案

【问题标题】：React Hook useEffect has missing dependencies - problemReact Hook useEffect 缺少依赖项 - 问题
【发布时间】：2021-08-04 08:02:36
【问题描述】：

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

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

【解决方案1】：

您在 useEffect 中调用 useState，这违反了 hooks 规则。不能在回调中调用 React Hook “useState”。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用。

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

const useCollectData = (url) => {
    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
    },[]);
    return [dataState]
};

export default useCollectData

【讨论】：

非常感谢！现在我的问题解决了：D

【解决方案2】：

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
},[]);

【讨论】：