reactjs中的组件重新排序

我正在开发react应用程序，其中一个组件在我放置

console.log（'Hello'）

时会继续重新渲染。我不知道为什么。这就是我的组件的外观。 任何帮助都会很好

DispensingIncident.jsx

const dispensingindents=（道具）=>{
const classes=useStyles（）；
常数{
getFilterData，
分发数据，
获取周期列表，
getTypeList，
获取概览数据，
位置，
历史
}=道具；
const[timeSpan，setTimeSpan]=React.useState（“每月”）；
const[year，setYear]=React.useState（2020年）；
常量[tabValue，setTabValue]=React.useState（0）；
常量[spanData，setSpanData]=React.useState（[]）；
const[dataType，setDataType]=React.useState（“aim”）；
常数{
加载，
期间
时期
类型，
分发概览数据，
概述数据加载，
}=分散数据；
const{count}=dispensingOverviewData；
//console.log（“道具”，持续时间[“每月”][0]。期间）；
console.log（“Hellowo”）；
useffect（（）=>{
getPeriodList（）；
getTypeList（）；
//eslint禁用下一行
}, []);
useffect（（）=>{
历史。替换({
路径名：location.pathname，
搜索：`？year=${year}&period=${timeSpan}`，
});
设定年份（年）；
设置时间跨度（时间跨度）；
//eslint禁用下一行
}，[年，时间跨度]；
useffect（（）=>{
getFilterData（年）；
//eslint禁用下一行
}，[年]；
/**
*从url搜索参数获取查询
*@usage query.get（“年”）
*/
函数useQuery（）{
返回新的URLSearchParams（location.search）；
}
const query=useQuery（）；
/**
*
*@param{*}事件
*@param{*}newValue
*更改制表符
*/
//eslint禁用下一行
const handleTabChange=（事件，newValue）=>{
设置值（newValue）；
};
/**
*年际变化
*@param{*}事件
*/
const handleYearChange=（事件）=>{
设置年（事件、目标、值）；
setTimeSpan（query.get（“period”）；
};
/**
*跨度变化
*@param{*}事件
*/
const handleSpanChange=（事件）=>{
常量值=event.target.value；
设置时间跨度（值）；
};
const time=query.get（“期间”）；
useffect（（）=>{
如果（时间=“每年”）{
const yearlyData=持续时间[“每年”]；
setSpanData（年度数据）；
}否则如果（时间==“每周”）{
常量周数据=持续时间[“每周”]；
setSpanData（周数据）；
}否则如果（时间==“季度”）{
const quarterlyData=持续时间[“季度”]；
setSpanData（季度数据）；
}否则如果（时间==“每月”）{
const monthlyData=持续时间[“每月”]；
设置pandata（月数据）；
}否则，如果（时间==“6个月”）{
const halfYearlyData=持续时间[“半年”]；
setSpanData（半年数据）；
}
}，[时间，持续时间]；
常量handleSpanTabChange=（数据）=>{
getOverviewData（年份、data.period.to、data.period.from、数据类型）；
};
const handleDataTypeChange=（事件）=>{
setDataType（event.target.value）；
};
如果（装载）{
返回(
);
}
返回(
//内容在这里。。。。。。
);
};
函数MapStateTops（状态）{
返回{
dispensingData:state.dispensing，
};
}
const mapDispatchToProps=（调度）=>({
getFilterData:（年份）=>
分派（{type:GET_disposition_INCIDENT_FILTER_DATA，year}），
getPeriodList:（）=>dispatch（{type:GET_Dispatting_INCIDENT_PERIOD_LIST}），
getTypeList:（）=>dispatch（{type:GET_Dispatting_INCIDENT_type_LIST}），
getOverviewData：（期间、到、从、数据类型）=>
分派（{type:GET_\u OVERVIEW，period，from，to，datatype}），
});
导出默认连接(
MapStateTops，
mapDispatchToProps
)（分散事件）；

这就是当我放置

console.log（'Hello'）

---

不要将控制台日志和其他具有副作用的功能直接放在功能组件的功能体中。你能更清楚地解释一下你所说的“不断重播”是什么意思吗？@drewerese我已经在我的问题中添加了图像。这就是我的组件中发生的情况。这是正常的吗？你有几个效果挂钩，你没有提供复制的步骤，所以我们不知道你可能会做什么导致问题。如果你登录一个特效，你会看到同样多的特效吗<代码>使用效果（（）=>console.log（'render'））每次渲染只记录一次日志，因此您可以看到它真正重新渲染了多少次。我尝试在每个useEffect中放置

console.log（'render'）

，无论它在哪里显示两次或三次以上。然后，我想如果您将应用程序渲染到

React.StrictMode

元素中，这可能是重复的。如果每个效果只有一个日志，那么这是正常行为。

const DispensingIncidents = (props) => {
  const classes = useStyles();
  const {
    getFilterData,
    dispensingData,
    getPeriodList,
    getTypeList,
    getOverviewData,
    location,
    history,
  } = props;

  const [timeSpan, setTimeSpan] = React.useState("Monthly");
  const [year, setYear] = React.useState(2020);
  const [tabValue, setTabValue] = React.useState(0);
  const [spanData, setSpanData] = React.useState([]);
  const [dataType, setDataType] = React.useState("aim");
  const {
    loading,
    duration,
    period,
    type,
    dispensingOverviewData,
    overviewDataLoading,
  } = dispensingData;
  const { count } = dispensingOverviewData;
  // console.log("props", duration["monthly"][0].period);
  console.log("Hellowo");
  useEffect(() => {
    getPeriodList();
    getTypeList();
    // eslint-disable-next-line
  }, []);

  useEffect(() => {
    history.replace({
      pathname: location.pathname,
      search: `?year=${year}&period=${timeSpan}`,
    });
    setYear(year);
    setTimeSpan(timeSpan);
    // eslint-disable-next-line
  }, [year, timeSpan]);

  useEffect(() => {
    getFilterData(year);
    // eslint-disable-next-line
  }, [year]);

  /**
   * GET query from url search param
   *  @usage query.get("year")
   */
  function useQuery() {
    return new URLSearchParams(location.search);
  }
  const query = useQuery();

  /**
   *
   * @param {*} event
   * @param {*} newValue
   * on tab change
   */

  // eslint-disable-next-line
  const handleTabChange = (event, newValue) => {
    setTabValue(newValue);
  };

  /**
   * Year change
   * @param {*} event
   */
  const handleYearChange = (event) => {
    setYear(event.target.value);
    setTimeSpan(query.get("period"));
  };

  /**
   * Span change
   * @param {*} event
   */
  const handleSpanChange = (event) => {
    const value = event.target.value;

    setTimeSpan(value);
  };

  const time = query.get("period");

  useEffect(() => {
    if (time === "Yearly") {
      const yearlyData = duration["yearly"];
      setSpanData(yearlyData);
    } else if (time === "Weekly") {
      const weeklyData = duration["weekly"];
      setSpanData(weeklyData);
    } else if (time === "Quarterly") {
      const quarterlyData = duration["quarterly"];
      setSpanData(quarterlyData);
    } else if (time === "Monthly") {
      const monthlyData = duration["monthly"];
      setSpanData(monthlyData);
    } else if (time === "6 months") {
      const halfYearlyData = duration["half-yearly"];
      setSpanData(halfYearlyData);
    }
  }, [time, duration]);

  const handleSpanTabChange = (data) => {
    getOverviewData(year, data.period.to, data.period.from, dataType);
  };
  const handleDataTypeChange = (event) => {
    setDataType(event.target.value);
  };

  if (loading) {
    return (
      <Loading/>
    );
  }
  return (
    <div className={classes.dispenseRoot}>
      <Paper
        elementType="div"
        elevation={5}
        square={true}
        variant="elevation"
        className={classes.topContainer}
      >
           // content here......
        </Paper>
    </div>
  );
};

function mapStateToProps(state) {
  return {
    dispensingData: state.dispensing,
  };
}

const mapDispatchToProps = (dispatch) => ({
  getFilterData: (year) =>
    dispatch({ type: GET_DISPENSING_INCIDENT_FILTER_DATA, year }),
  getPeriodList: () => dispatch({ type: GET_DISPENSING_INCIDENT_PERIOD_LIST }),
  getTypeList: () => dispatch({ type: GET_DISPENSING_INCIDENT_TYPE_LIST }),
  getOverviewData: (period, to, from, datatype) =>
    dispatch({ type: GET_DISPENSING_OVERVIEW, period, from, to, datatype }),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DispensingIncidents);