Javascript 如何在reactjs中将数据从一个api端点传递到另一个api端点

我正在开发一个react应用程序。这必须通过api端点

/Districing

和

/overview

从Districing中我们得到一些数据，这些数据需要在组件装载时传递到

/overview

端点，显示用户登录时应该显示一些数据。 为此，我从

/distribution

中提取数据，并将其存储在redux store中，并将其传递到

/overview

的组件中，但它显示了一个错误，即

值未定义

，但在when I

console.log中可用。
当我在那之后刷新时，效果很好。我不知道为什么

这是我的密码

const DispensingIncidents = (props) => {
  const classes = useStyles();
  const {
    getFilterData,
    dispensingData,
    getOverviewData,
    location,
    history,
    getAnalysis,
  } = 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("");
  const [dataTo, setDataTo] = React.useState("");
  const [dataFrom, setDataFrom] = React.useState("");

  // eslint-disable-next-line
  const [overViewDataType, setOverViewDataType] = React.useState("");

  const {
    loading,
    duration,
    period,
    type,
    dispensingOverviewData,
    overviewDataLoading,
    incidenceAnalysisData,
    analysisDataLoading,
  } = dispensingData;
  const { count } = dispensingOverviewData;
  const { monthly } = duration;
  useEffect(() => {
    history.replace({
      pathname: location.pathname,
      search: `?year=${year}&period=${timeSpan}`,
    });
    setYear(year);
    setTimeSpan(timeSpan);
    // eslint-disable-next-line
  }, [year, timeSpan]);

  /**
   *  This updates on Year given
   */
  useEffect(() => {
    getFilterData(year);
  }, [getFilterData, year]);
  // console.log("DispesningDuration", monthly[0]);    <--- this gives the data 
  useEffect(() => {
    getOverviewData(
      Object.keys(period)[3],
      monthly[0].period.to,         <--- Here it says [0] is not defined
      monthly[0].period.from,
      Object.keys(type)[0]
    );

    setTimeSpan(Object.keys(period)[3]);
    setDataFrom(monthly[0].period.from);
    setDataTo(monthly[0].period.to);
    setDataType(Object.keys(type)[0]);
  }, [getOverviewData, period, monthly, type]);

  useEffect(() => {
    getAnalysis(
      count[0].key,
      Object.keys(period)[3],
      monthly[0].period.from,
      monthly[0].period.to,
      Object.keys(type)[0],
      1
    );
    setOverViewDataType(count[0].key);
  }, [count, getAnalysis, period, type, monthly]);

  /**
   * GET query from url search param
   *  @usage query.get("year")
   */
  function useQuery() {
    return new URLSearchParams(location.search);
  }
  const query = useQuery();
  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]);

  /**
   *
   * @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 handleSpanTabChange = (data) => {
    setDataTo(data.period.to);
    setDataFrom(data.period.from);
    getOverviewData(time, data.period.to, data.period.from, dataType);
  };
  const handleDataTypeChange = (event) => {
    setDataType(event.target.value);
    getOverviewData(time, dataTo, dataFrom, event.target.value);
  };

  const handleOverViewClick = (data) => {
    getAnalysis(data, time.toLowerCase(), dataFrom, dataTo, dataType, 1);
  };

const dispensingindents=（道具）=>{
const classes=useStyles（）；
常数{
getFilterData，
分发数据，
获取概览数据，
位置，
历史
getAnalysis，
}=道具；
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（“”）；
const[dataTo，setDataTo]=React.useState（“”）；
const[dataFrom，setDataFrom]=React.useState（“”）；
//eslint禁用下一行
const[overViewDataType，setOverViewDataType]=React.useState（“”）；
常数{
加载，
期间
时期
类型，
分发概览数据，
概述数据加载，
事件分析数据，
分析数据加载，
}=分散数据；
const{count}=dispensingOverviewData；
const{monthly}=持续时间；
useffect（（）=>{
历史。替换({
路径名：location.pathname，
搜索：`？year=${year}&period=${timeSpan}`，
});
设定年份（年）；
设置时间跨度（时间跨度）；
//eslint禁用下一行
}，[年，时间跨度]；
/**
*此更新日期为给定年份
*/
useffect（（）=>{
getFilterData（年）；
}，[getFilterData，年份]；
//console.log（“DisposingDuration”，每月[0]）{
获取概览数据(
对象。键（周期）[3]，
每月[0]。期间。到{
getAnalysis(
计数[0]。键，
对象。键（周期）[3]，
每月[0]。期间。从，
每月[0]。期间。到，
Object.key（类型）[0]，
1.
);
setOverViewDataType（计数[0]。键）；
}，[count，getAnalysis，period，type，monthly]）；
/**
*从url搜索参数获取查询
*@usage query.get（“年”）
*/
函数useQuery（）{
返回新的URLSearchParams（location.search）；
}
const query=useQuery（）；
const time=query.get（“期间”）；
useffect（（）=>{
如果（时间=“每年”）{
const yearlyData=持续时间[“每年”]；
setSpanData（年度数据）；
}否则如果（时间==“每周”）{
常量周数据=持续时间[“每周”]；
setSpanData（周数据）；
}否则如果（时间==“季度”）{
const quarterlyData=持续时间[“季度”]；
setSpanData（季度数据）；
}否则如果（时间==“每月”）{
const monthlyData=持续时间[“每月”]；
设置pandata（月数据）；
}否则，如果（时间==“6个月”）{
const halfYearlyData=持续时间[“半年”]；
setSpanData（半年数据）；
}
}，[时间，持续时间]；
/**
*
*@param{*}事件
*@param{*}newValue
*更改制表符
*/
//eslint禁用下一行
const handleTabChange=（事件，newValue）=>{
设置值（newValue）；
};
/**
*年际变化
*@param{*}事件
*/
const handleYearChange=（事件）=>{
设置年（事件、目标、值）；
setTimeSpan（query.get（“period”）；
};
/**
*跨度变化
*@param{*}事件
*/
const handleSpanChange=（事件）=>{
常量值=event.target.value；
设置时间跨度（值）；
};
常量handleSpanTabChange=（数据）=>{
setDataTo（data.period.to）；
setDataFrom（data.period.from）；
getOverviewData（时间、data.period.to、data.period.from、数据类型）；
};
const handleDataTypeChange=（事件）=>{
setDataType（event.target.value）；
getOverviewData（时间、dataTo、dataFrom、event.target.value）；
};
const handleoverview click=（数据）=>{
getAnalysis（数据，time.toLowerCase（），dataFrom，dataTo，dataType，1）；
};
您是否尝试过检查
每月
长度？尝试一下，我想您不会看到错误：
monthly.length>0&&getOverviewData（您的参数）
我的猜测是，由于您的redux状态尚未填充，因此在初始渲染时，
每月
是未定义的，并且以后控制台日志会工作，因为它位于组件的函数体中，并且稍后在控制台中单击检查时会异步填充。您应该防止在初始渲染。@HosseinAhmadi我尝试过这个，但没有work@adityakumar我已经检查并注意到您在几行之后使用了
monthly[0]
。请检查错误位置是否已更改，以便在
monthly
长度大于0时，您需要将所有useEffect放在条件范围内运行