React Hook useEffect 缺少依賴項：'init'

Question

React Hook useEffect 缺少依賴項：'init'。 包括它或刪除依賴數組 react-hooks/exhaustive-deps

src/admin/apiAdmin.js

export const getCategories = () => {
    return fetch(`${API}/categories`, {
        method: 'GET'
    })
        .then(response => {
            return response.json()
        })
        .catch(err => console.log(err))
}

源代碼/添加產品.js

//load categories and set form data
    const init = () => {
        getCategories().then(data => {
            if (data.error) {
                setValues({ ...values, error: data.error })
            } else {
                // console.log(data)
                setValues({
                    ...values,
                    categories: data.data,
                    formData: new FormData()
                })
            }
        })
    }
useEffect(() => {
        init();
    }, [])

我的前端代碼后端代碼

Answer 1

使用useCallback 鈎子來記憶回調，它會將函數存儲在內存中，只有在其依賴項發生變化時才重新計算它 [values]

// import { useCallback } from "react";
//load categories and set form data
const init = useCallback(() => {
  getCategories().then(data => {
    if (data.error) {
      setValues({ ...values, error: data.error });
    } else {
      // console.log(data)
      setValues({
        ...values,
        categories: data.data,
        formData: new FormData()
      });
    }
  });
}, [values]);

useEffect(() => {
  init();
}, [init]);

希望有幫助

Answer 2

這是警告您，因為您的init函數正在使用可能會更改的values變量。 您可以通過使用為您提供先前狀態的回調設置您的狀態來避免此消息。

const init = () => {
  getCategories().then(data => {
    if (data.error) {
      setValues(prev => ({ ...prev, error: data.error }));
    } else {
      // console.log(data)
      setValues(prev => ({
        ...prev,
        categories: data.data,
        formData: new FormData()
      }));
    }
  });
};