解决反应挂钩/彻底下降的最佳方法

如何解决解决反应挂钩/彻底下降的最佳方法

这是我的错误：“'setPartData'函数使useEffect Hook的依赖关系（在第44行）在每个渲染器上都更改。将其移至useEffect回调内。或者，将'setPartData'定义包装到其自己的useCallback（）Hook.eslint（react-hooks / exhaustive-deps）“

由于无法从数组中删除url和setPartData并禁用eslint规则，我该如何最好地解决此问题。

    /* eslint-disable no-shadow */
import { useState,useEffect } from 'react';

export const apiStates = {
    LOADING: 'LOADING',SUCCESS: 'SUCCESS',ERROR: 'ERROR',};

/**
 *
 * @param {*} url
 */
export const useApi = (url) => {
    const [data,setData] = useState({
        state: apiStates.LOADING,error: '',data: [],});
    /**
     *
     * @param {*} partialData
     */
    const setPartData = (partialData) => setData({ ...data,...partialData });

    useEffect(() => {
        setPartData({
            state: apiStates.LOADING,});
        fetch(url)
            .then((response) => response.json())
            .then((data) => {
                setPartData({
                    state: apiStates.SUCCESS,data,});
            })
            .catch((err) => {
                setPartData({
                    state: apiStates.ERROR,error: err,});
            });
    },[url,setPartData]);

    return data;
};

我尝试使用useCallBack（）钩子，但是在创建无限循环时，似乎执行不正确。任何帮助将不胜感激。

解决方法

在useEffect挂钩中移动setPartData的声明，并使用setData的函数版本

const setPartData = (partialData) => setData((data) => ({ ...data,...partialData }));

如果您还需要在钩子之外设置setPartData函数，请使用useCallback使其在每个渲染器上均不变

const setPartData = useCallback((partialData) => setData((data) => ({ ...data,...partialData })),[]);

这是内部定义了setPartData的完整useEffect

useEffect(() => {
    /**
     * @param {Partial<typeof data>} partialData
     */
    const setPartData = (partialData) =>
      setData((data) => ({ ...data,...partialData }));
    setPartData({
      state: apiStates.LOADING,});
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setPartData({
          state: apiStates.SUCCESS,data,});
      })
      .catch((err) => {
        setPartData({
          state: apiStates.ERROR,error: err,});
      });
  },[url]);