import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Actions from '../actions';
export const UserComponent = ({ foo, baz, bar, user, fetchUser }) => {
useEffect(() => {
console.log('##### I WAS CALLED I WAS CALLED');
fetchUser();
}, []);
return (
<div>
<p>{user.name}</p>
<p>{foo} {baz} {bar}</p>
</div>
);
};
UserComponent.propTypes = {
fetchUser: PropTypes.func.isRequired,
user: PropTypes.shape({}),
};
const mapActionsToProps = {
fetchUser: Actions.fetchUser,
};
const mapStateToProps = ({ data }) => ({
user: data.user,
});
export default connect(mapStateToProps, mapActionsToProps)(UserComponent);
我收到错误“React Hook useEffect 缺少依赖项”
但是如果我将 fetchUser
放入依赖项数组
useEffect(() => {
console.log('##### I WAS CALLED I WAS CALLED');
fetchUser();
}, [fetchUser]);
它会导致无限循环。
最佳答案
问题在于函数 fetchUser 在每次渲染中都会发生变化。 您可以使用“useCallback”解决问题。
示例:
const initFetchMethod = useCallback(() => {
return dispatch(fetchUserAction())
}, [dispatch])
useEffect(() => {
initFetchMethod();
}, [initFetchMethod]);
引用文献:
关于javascript - Eslint React Hooks错误: eslint-plugin-react-hooks exhaustive deps warning for a function dependency in useEffect,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57072361/