React Hook React.useEffect errol

Question

React Hook У React.useEffect отсутствует зависимость: params.id. Либо включите его, либо удалите массив зависимостей react-hooks/excustive-deps. Эта ошибка возникла во многих местах моего проекта.

Образец изображения

import React, { Fragment } from "react";
import ArticleDetails from "./List";
import { connect } from "react-redux";
import {
  articleFetchById,
  articleFetch,
  articleFetchByChannel
} from "../../../redux/action/articles";

const Article = ({
  articles,
  articleFetchById,
  match: { params },
  auth,
  articleFetch,
  articleFetchByChannel
}) => {
  React.useEffect(() => {
    articleFetchById(params.id);
  }, [articleFetchById]);
  React.useEffect(() => {
    articleFetch();
  }, [articleFetch]);
  React.useEffect(() => {
    articleFetchByChannel();
  }, [articleFetchByChannel]);
  return (
    <Fragment>
      <ArticleDetails articles={articles} auth={auth} matchId={params.id} />
    </Fragment>
  );
};
const mapStateToProps = state => {
  return {
    articles: state.articles,
    auth: state.auth
  };
};
export default connect(mapStateToProps, {
  articleFetchById,
  articleFetch,
  articleFetchByChannel
})(Article);

Answer 1

Вам нужно пройти params.id(поскольку вы используете его в useEffect) во втором массиве аргументов useEffect. Это должно исправить предупреждение.

React.useEffect(() => {
    articleFetchById(params.id);
  }, [articleFetchById, params.id]);

Answer 2

В идеале вы должны включить все зависимости, которые вы используете, в хук useEffect, потому что, если вы не используете, вы можете пропустить некоторые функции.

Лучшее решение прямо сейчас - использовать плагин ES Lint в https://reactjs.org/docs/hooks-rules.html, пометив react-hooks/excustive-deps как предупреждение.

"react-hooks/exhaustive-deps": "warn"