解决react-hooks/exhaustive deps的最佳方法

Question

这是我的错误：“'setPartData‘函数在每次渲染时使useEffect钩子(在第44行)的依赖项发生变化。将其移动到useEffect回调中。或者，将'setPartData’定义包装到它自己的useCallback() Hook.eslint(Hook.eslint-hooks/useCallback-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()钩子，但我似乎没有正确地实现它，因为我正在创建一个无限循环。任何帮助都将不胜感激。

Answer 1

将您的setPartData声明移到useEffect挂钩中，并使用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]);