如何解决 useEffect 中的依赖关系问题？答案

【问题标题】：How to fix the problem with dependencies in useEffect?如何解决 useEffect 中的依赖关系问题？
【发布时间】：2020-03-13 13:56:38
【问题描述】：

我需要请求一次，但出现与依赖项相关的错误。如果我添加到依赖项中，将会出现无限循环。

在这种情况下你建议怎么做？

代码：

import React from "react";
import { useEffect } from "react";
import { useObjects } from "../../store/api";
import { connect } from "react-redux";
import { GetObjectsAC } from "../../store/ObjectRecucer";
import { Object } from "./Object";

let MapStateToProps = state => {
  return {
    currentObj: state.objReducer.CurrentObjects
  };
};
export let ObjectBlock = props => {
  const { request } = useObjects();
  useEffect(() => {
    const data = request("/api/objects").then(res => {
      props.GetObjectsAC(res.message);
    });
  }, []);
  const objBlock = props.currentObj.map((el, i) => (
    <Object key={i} street={el.street} home={el.home} />
  ));
  return <div>{objBlock}</div>;
};
export let ObjectContainer = connect(
  MapStateToProps,
  { GetObjectsAC }
)(ObjectBlock);

【问题讨论】：

将效果逻辑移到它的无参数函数中。
@ritaj 结果是一样的
将props.GetObjectsAC放在依赖数组中

标签： reactjs redux react-redux react-hooks

【解决方案1】：

这样的事情将解决警告：

import React from "react";
import { useEffect } from "react";
import { useObjects } from "../../store/api";
import { connect } from "react-redux";
import { GetObjectsAC } from "../../store/ObjectRecucer";
import { Object } from "./Object";

let MapStateToProps = state => {
  return {
    currentObj: state.objReducer.CurrentObjects
  };
};
export let ObjectBlock = props => {
  const { request } = useObjects();
  const { GetObjectsAC, currentObj } = props; // destructure props
  useEffect(() => {
    const data = request("/api/objects").then(res => {
      GetObjectsAC(res.message);
    });
  }, [GetObjectsAC]); // Add value to deps array
  const objBlock = currentObj.map((el, i) => (
    <Object key={i} street={el.street} home={el.home} />
  ));
  return <div>{objBlock}</div>;
};
export let ObjectContainer = connect(
  MapStateToProps,
  { GetObjectsAC }
)(ObjectBlock);

【讨论】：