Reactjs 使用效果。找到定义它的父组件，并将该定义包装到useCallback中

这是我个人资料操作中的代码

import axios from 'axios';

import { GET_PROFILE, PROFILE_ERROR } from './types';

// Get current users profile
export const getCurrentProfile = () => async (dispatch) => {
    try {
        const res = await axios.get('/api/profile/me');

        dispatch({
            type: GET_PROFILE,
            payload: res.data,
        });

        dispatch(getCurrentProfile());
    } catch (err) {
        dispatch({
            type: PROFILE_ERROR,
            payload: {
                msg: err.response.statusText,
                status: err.response.status,
            },
        });
    }
};

这是我的仪表盘

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { getCurrentProfile } from '../../actions/profile';

const Dashboard = ({ getCurrentProfile, auth, profile }) => {
    useEffect(() => {
        getCurrentProfile();
    }, []);

    return <div>Dashboard</div>;
};

Dashboard.propTypes = {
    getCurrentProfile: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired,
    profile: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
    auth: state.auth,
    profile: state.profile,
});

export default connect(mapStateToProps, { getCurrentProfile })(Dashboard);

import React，{useffect}来自“React”；
从“道具类型”导入道具类型；
从'react redux'导入{connect}；
从“../../actions/profile”导入{getCurrentProfile}；
常量仪表板=（{getCurrentProfile，auth，profile}）=>{
useffect（（）=>{
getCurrentProfile（）；
}, []);
返回仪表板；
};
Dashboard.propTypes={
getCurrentProfile:PropTypes.func.isRequired，
auth:PropTypes.object.isRequired，
配置文件：PropTypes.object.isRequired，
};
常量mapStateToProps=（状态）=>({
auth:state.auth，
profile:state.profile，
});
导出默认连接（mapStateToProps，{getCurrentProfile}）（仪表板）；

---

我发现错误“React Hook useEffect缺少依赖项：'getCurrentProfile'。包括它或删除依赖项数组。如果'getCurrentProfile'更改太频繁，请找到定义它的父组件，并将该定义包装在useCallback中”

，如警告所示，您可以将

getCurrentProfile

作为依赖项包含到useEffect中

另外，由于

getCurrentProfile

函数作为

分派函数传递给props form connect

，因此它的引用不会更改，因此您无需担心它的引用会发生更改，也无需使用useCallback来记忆它

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

请注意，在getCurrentProfile函数中，不能在没有条件的情况下分派自身

export const getCurrentProfile = () => async (dispatch) => {
    try {
        const res = await axios.get('/api/profile/me');

        dispatch({
            type: GET_PROFILE,
            payload: res.data,
        });

    } catch (err) {
        dispatch({
            type: PROFILE_ERROR,
            payload: {
                msg: err.response.statusText,
                status: err.response.status,
            },
        });
    }
};

---

我想这就是eslint的错误，它使用了react-hooks插件。错误的意思是，当你使用一个接受数组作为依赖项的钩子时，插件建议在钩子函数中添加任何变量，function…，它们有机会改变每个渲染，以包含在依赖项数组中。那么如何修复它呢

• 您可以在依赖项数组中包含

  getCurrentProfile

  ，但如果您定义组件或自定义挂钩，请确保使用

  useCallback

  包装

  getCurrentProfile

• 如果愿意，您可以禁用eslint的效果

---

另外，

getCurrentProfile

已经是一个函数，所以您可以使用

useffect（getCurrentProfile，[getCurrentProfile]）它仍然不起作用。在我的Redux devtools中，它显示了PROFILE_错误，它没有加载我的用户配置文件/信息，还显示了错误请求。您建议的错误是因为您没有将正确的参数传递给getCurrentProfile中的aPI请求。还要注意的是，您正在调度函数本身。请检查更新。删除
dispatch（getCurrentProfile（））来自getCurrentProfile中function@JmMacatangay这是一个不同的问题，与您的API请求有关。确保您的axios GET请求具有正确的URL和参数准备就绪，并与我首先创建的配置文件之一一起工作。而另两个则只返回一个PROFILE_错误-_-
useEffect(() => {
    getCurrentProfile();
   // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);