Reactjs 从reducer获取响应数据，并用于Recharts中的折线图数据和x轴/y轴/工具提示数据键和内容

目前，我正在使用react应用程序中的recharts制作折线图。我正在研究如何基于响应缩减器获取响应数据，以获取响应数据的状态（mainApiResponseReducer）。我需要在折线图中使用它作为我的数据，并设置X轴和Y轴数据键（X轴基于（fsc_WK_NBR-1）总共3年的销售数据（参考线表示当前年度的当前WK_NBR，其他参考线表示当前年度的WK_NBR-1，-2，依此类推）.响应数据如下所示：

我正在寻找一种方法，根据响应数据（见代码注释）设置x轴和y轴数据键，以及使用mainApiResponseReducer的响应作为数据的折线图。下面是我的图表截至目前的快照（只有虚拟数据显示x轴为年，而不是每年之间的不同刻度）：

我还有下面使用虚拟数据的代码，还有我同事的另一个代码，一个使用相同mainApiResponseReducer的不同组件：

const ForecastGraph = () => {
  const classes=useStyles();
  const [onclickSales, setOnclickSales] = useState(true);
  const [onclickB3, setOnclickB2] = useState(true);
  const [onclickB3, setOnclickB3] = useState(true);
  const handleSalesButton = () => {
    setOnclickSales(!onclickSales);
  };
  const handleB2Button = () => {
    setOnclickB2(!onclickB2);
  };
  const handleB3Button = () => {
    setOnclickB3(!onclickB3);
  };

  return (
    <center>
      {onclickSales &&
      <button className={classes.buttonRed} 
      onClick={handleSalesButton} >Sales</button>
      }

      {!onclickSales &&
      <button  className={classes.buttonOff}
      onClick={handleSalesButton} >Sales</button>
      }

      {/* {onclickB2 &&
      <button className={classes.buttonGreen} 
      onClick={handleB2} >B2</button>
      }

      {!onclickB2 &&
      <button  className={classes.buttonOff}
      onClick={handleB2} >B2</button>
      }

      {onclickB3 &&
      <button className={classes.buttonBlue} 
      onClick={handleB3} >B3</button>
      }

      {!onclickB3 &&
      <button  className={classes.buttonOff}
      onClick={handleB3} >B3</button>
      } */}

      <div className={styles.graphGrid}>
        <ResponsiveContainer>
          <LineChart
            width={500}
            height={300}
            data={responseData}
            margin={{
              top: 5,
              right: 30,
              left: 20,
              bottom: 5
            }}
          >
            <CartesianGrid  
              vertical={false} 
              opacity="0.4" 
            />
            <XAxis 
              // need dataKey to be (fsc_WK_NBR - 1) and for all 3 years of data based on that same logic
              // of (fsc_WK_NBR - 1) for each year prior to current year
              
              tickCount={25}
            />
            <YAxis 
              type="number"
              //dataKey should be the sales_UNITS
              tickCount={6} 
              axisLine={false} 
              tickLine={false}
              padding={ {left: 30} }
            />
            <Tooltip 
              // content={<CustomTooltip />}
              isAnimationActive={false}
            />
            {onclickSales && 
            <Line type="monotone" 
              //data should be based on sales_UNITS for the given wk nbr of the year
              stroke="#BE1710" 
              strokeWidth={2} 
              isAnimationActive={false} 
              dot={{r:0}} 
            />
            }

            {/* {onclickB2 && 
            <Line type="monotone" 
              stroke="#22766F" 
              strokeWidth={2} 
              isAnimationActive={false} 
              dot={{r:0}} 
            />
            } */}

            {/* {onclickB3 &&
            <Line type="monotone" 
              //dataKey="pv" 
              stroke="#0E65BC" 
              strokeWidth={2} 
              isAnimationActive={false} 
              dot={{r:0}} 
            />
            } */}
            <ReferenceLine 
              // x = current fsc_WK_NBR of the current fsc_YR_NBR
              stroke="black" 
              strokeWidth={1}
            />
            <ReferenceLine 
              //x= (current fsc_WK_NBR -1) of (currentYear - 1)
              strokeWidth={0.5}
            />
            <ReferenceLine 
              //x= (current fsc_WK_NBR -1) of (currentYear - 2)
              strokeWidth={0.5}
            />
            <ReferenceLine 
              //x= (current fsc_WK_NBR -1) of (currentYear - 3)
              strokeWidth={0.5}
            />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </center>
  );
};

export default ForecastGraph;

const ForecastGraph=（）=>{
const classes=useStyles（）；
const[onclickSales，setOnclickSales]=useState（true）；
const[onclickB3，setOnclickB2]=useState（true）；
const[onclickB3，setOnclickB3]=useState（true）；
const handleSalesButton=（）=>{
setOnclickSales（！onclickSales）；
};
const handleB2Button=（）=>{
setOnclickB2（！onclickB2）；
};
const Handleb3按钮=（）=>{
setOnclickB3（！onclickB3）；
};
返回(
{onclick销售&&
销售额
}
{}销售&&
销售额
}
{/*{onclickB2&&
地下二层
}
{！onclickB2&&
地下二层
}
{onclickB3&&
地下三层
}
{！onclickB3&&
地下三层
} */}
{onclickSales&&
}
{/*{onclickB2&&
} */}
{/*{onclickB3&&
} */}
);
};
导出默认预测图；

另外，此项目中的一部分组件来自其他人，他们使用mainApiResponseReducer获取数据作为获取响应数据的参考（尽管我不确定如何将其用于我的折线图）：

const dispatch=usedpatch（）；
const mainApiResponseReducer=useSelector（state=>state.mainApiResponseReducer）；
const responseData=mainApiResponseReducer.data；
//log（“表页中的响应数据=”，responseData[0]）；
const currentWeek=mainApiResponseReducer.week；
const currentYear=mainApiResponseReducer.year；
const sales=mainApiResponseReducer.sales\u单位；
//日志（“Weeeeek”，currentWeek）；
设arr=Array（6.fill（）.map（（）=>Array（52.fill（））；
//让arr；
有回应吗？
responseData.forEach（（条目）=>{
//控制台日志（条目）；
开关（条目：fsc\u YR\u NBR）{
案例3：
arr[5][（entry.fsc_WK_NBR）-1]=entry.sales_单位
打破
案例2：
arr[4][（entry.fsc_WK_NBR）-1]=entry.sales_单位
打破
案例1：
arr[3][（entry.fsc_WK_NBR）-1]=entry.sales_单位
打破
本年度个案：
如果（（条目fsc工作编号）-1）<当前周）{
arr[2][（entry.fsc_WK_NBR）-1]=entry.sales_单位
}
打破
}
}):""

我是react世界的新手，因此我不确定如何使用recharts将此响应和此数据合并到我的折线图中，并适当设置组件以使用数据。如有任何帮助或建议，将不胜感激

const dispatch = useDispatch();
const mainApiResponseReducer = useSelector(state => state.mainApiResponseReducer);

const responseData = mainApiResponseReducer.data;
// console.log("Response Data in table page = ",responseData[0]);

const currentWeek = mainApiResponseReducer.week;
const currentYear = mainApiResponseReducer.year;
const sales = mainApiResponseReducer.sales_UNITS;
// console.log("WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEK",currentWeek);
let arr = Array(6).fill().map(() => Array(52).fill());
// let arr;
responseData?
responseData.forEach((entry) => {
  // console.log(entry);
  
  switch(entry.fsc_YR_NBR){
    case currentYear-3 :
      arr[5][(entry.fsc_WK_NBR)-1] = entry.sales_UNITS
      break;
    case currentYear-2 :
      arr[4][(entry.fsc_WK_NBR)-1] = entry.sales_UNITS
      break;
    case currentYear-1 :
      arr[3][(entry.fsc_WK_NBR)-1] = entry.sales_UNITS
      break;
    case currentYear :
      if(((entry.fsc_WK_NBR)-1) < currentWeek ) {
        arr[2][(entry.fsc_WK_NBR)-1] = entry.sales_UNITS
      }
      break;
  }
}):""