错误: Eslint -plugin Hooks详尽地警告useEffect中的函数依赖项。
错误: Eslint -plugin Hooks详尽地警告useEffect中的函数依赖项。
提问于 2019-07-17 01:10:16
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有一个缺失的依赖项”
但是如果我把fetchUser放在依赖数组中
useEffect(() => {
console.log('##### I WAS CALLED I WAS CALLED');
fetchUser();
}, [fetchUser]);
它会导致无限循环。
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-07-18 03:44:42
我在基于钩子的组件中错误地使用了redux。本指南帮助我在使用钩子的功能组件中使用redux。https://react-redux.js.org/next/api/hooks
Stack Overflow用户
发布于 2019-08-21 06:19:18
问题是，函数fetchUser在每次呈现中都会发生变化。您可以使用"useCallback“来解决这个问题。
示例：
const initFetchMethod = useCallback(() => {
return dispatch(fetchUserAction())
}, [dispatch])
useEffect(() => {
initFetchMethod();
}, [initFetchMethod]);参考文献：
Stack Overflow用户
发布于 2019-07-17 02:23:34
错误说，您需要将效果回调所使用的所有资源(vars/函数)放在依赖项数组中。
因此，您需要将fetchUsers放在依赖项数组中。但是，它会导致无限循环。因为，每次都会重新创建fetchUsers实例。
您需要维护api响应的加载状态。然后，在回调中添加一个支票，如下所示：
useEffect(() => {
if(!user && !loading ) {
fetchUser();
}
}, [fetchUser, user]);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57072361
复制相关文章
相似问题
SQL from语句中的IF子句
FROM子句中的SQL子查询
重写from语句中的MySQL子查询
SQL在from子句中含有子查询的Delete语句
SQL查询from语句中包含的内容
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
