0

React Hook React.useEffect 缺少依赖项:'params.id'。要么包含它,要么移除依赖数组 react-hooks/exhaustive-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);
4

2 回答 2

1

您需要params.id在 useEffect 的第二个参数数组中传递(因为您在 useEffect 中使用它)。那应该可以解决警告。

React.useEffect(() => {
    articleFetchById(params.id);
  }, [articleFetchById, params.id]);
于 2020-02-06T03:44:31.740 回答
0

理想情况下,您应该在 useEffect 挂钩中包含您正在使用的所有依赖项,因为如果您不使用,您可能会错过一些功能。

目前最好的解决方案是在https://reactjs.org/docs/hooks-rules.html#eslint-plugin中使用 ES Lint 插件,将 react-hooks/exhaustive-deps 标记为警告。

"react-hooks/exhaustive-deps": "warn"
于 2020-02-06T05:11:21.527 回答