useEffect. Найдите родительский компонент, который его определяет, и оберните это определение в useCallback - PullRequest
Новая
       4

useEffect. Найдите родительский компонент, который его определяет, и оберните это определение в useCallback

1 голос
/ 17 июня 2020

Итак, это мой код в действиях моего профиля 

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

, и я получаю эту ошибку «React Hook useEffect имеет недостающую зависимость: ' getCurrentProfile '. Включите его или удалите массив зависимостей. Если' getCurrentProfile 'изменяется слишком часто, найдите родительский компонент, который его определяет, и заключите это определение в useCallback "

Ответы [ 2 ]

2 голосов
/ 17 июня 2020

Как сказано в предупреждении, вы можете включить getCurrentProfile в качестве зависимости для useEffect.

Кроме того, поскольку функция getCurrentProfile передается как dispatch function to props form connect, ее ссылка не изменяется, и, следовательно, вам не нужно беспокоиться об изменении ее ссылки или using 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,
            },
        });
    }
};
0 голосов
/ 17 июня 2020

Думаю, это ошибка плагина eslint wiht react-hooks. Ошибка означает, что когда вы используете хуки, которые принимают массив в качестве зависимостей, плагин рекомендует добавлять любую переменную, функцию ..., которая имеет возможность изменять каждый рендеринг, внутри функции хука, которая будет включена в массив зависимостей. Итак, как это исправить?

  • Вы можете включить getCurrentProfile в массив зависимостей, но убедитесь, что вы используете useCallback для обертывания getCurrentProfile, если вы определяете компонент или пользовательский обработчик.
  • Вы можете отключить эффект eslint, если вы используете sh по 
useEffect(() => {
    getCurrentProfile();
   // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
...