reactjs - reactjs中的组件重新渲染

Question

我正在开发反应应用程序，当我放置console.log('Hello')它时，我的组件之一会继续重新渲染。我不确定为什么。这就是我的组件的外观。任何帮助都会很棒

DispensingIncident.jsx

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

这就是我放的时候发生的事情console.log('Hello')

标签： reactjs