Question

这是我的错误：“'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（）钩子，但是在创建无限循环时，似乎执行不正确。任何帮助将不胜感激。

Answer 1

在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]);

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

1 个答案: