Eslint React Hooks错误：eslint-plugin-react-hooks用尽详尽的警告警告useEffect中的功能依赖项

Question

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

它导致无限循环。

Answer 1

我在基于挂钩的组件中以错误的方式使用redux。 该指南对我使用钩子在功能组件中使用redux有很大帮助。 https://react-redux.js.org/next/api/hooks

Answer 2

问题在于，函数fetchUser在每个渲染中都会更改。 您可以使用“ useCallback”解决问题。

例：

const initFetchMethod = useCallback(() => {
   return dispatch(fetchUserAction())
}, [dispatch])


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

参考文献：

• React Hooks Api参考

• React-Redux Hooks Api参考

Answer 3

如果fetchUser操作在应用程序生命周期中未更改，请禁用es-lint警告

由于fetchUser是一个redux操作，它不会在您的应用程序生命周期中发生变化，所以我想说您可以放心地为您的案例禁用规则。

useEffect(() => {
    console.log('##### I WAS CALLED I WAS CALLED');
    fetchUser();
    //eslint-disable-next-line import/no-extraneous-dependencies
  }, []);

Answer 4

该错误表明，您需要将效果回调使用的所有资源（变量/函数）放入依赖项数组中。

因此，您需要将fetchUsers放入依赖关系数组中。 但是，它将导致无限循环。 因为，每次都会重新创建fetchUsers实例。

您需要维护api响应的加载状态。 然后，像下面这样在回调中进行检查：

useEffect(() => {
    if(!user && !loading ) {
        fetchUser();
    }
}, [fetchUser, user]);