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

参考文献：

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

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

4 个答案: