Recharts 放大钩子

问题描述

我一直在尝试重写重新图表放大钩子组件而不是类的代码，但我一直有错误。有人可以告诉我我做错了什么或帮助我修复我的代码吗？ 这 error， 这是来自 recharts 示例的 original version 我就是这样做的：

import {
 Label,LineChart,Line,Cartesiangrid,XAxis,YAxis,Tooltip,ReferenceArea,} from "recharts";

const data = [
 { name: 1,cost: 4.11,impression: 100 },{ name: 2,cost: 2.39,impression: 120 },{ name: 3,cost: 1.37,impression: 150 },{ name: 4,cost: 1.16,impression: 180 },{ name: 5,cost: 2.29,impression: 200 },{ name: 6,cost: 3,impression: 499 },{ name: 7,cost: 0.53,impression: 50 },{ name: 8,cost: 2.52,{ name: 9,cost: 1.79,{ name: 10,cost: 2.94,impression: 222 },{ name: 11,cost: 4.3,impression: 210 },{ name: 12,cost: 4.41,impression: 300 },{ name: 13,cost: 2.1,{ name: 14,cost: 8,impression: 190 },{ name: 15,cost: 0,{ name: 16,cost: 9,impression: 400 },{ name: 17,{ name: 18,cost: 2,{ name: 19,{ name: 20,cost: 7,];

const ZoomIn = () => {


 const [data,setData] = useState({});
 const [left,setLeft] = useState("dataMin");
 const [right,setRight] = useState("dataMax");
 const [top,setTop] = useState("dataMax+1");
 const [bottom,setBottom] = useState("dataMin-1");
 const [top2,setTop2] = useState("dataMax+20");
 const [bottom2,setBottom2] = useState("dataMin-20");
 const [animation,setAnimation] = useState(true);
 const [refareaLeft,setRefareaLeft] = useState("");
 const [refareaRight,setRefareaRight] = useState("");
 const getAxisYDomain = (from,to,ref,offset) => {
   ////
   const refData = data.slice(from - 1,to);
   let [bottom,top] = [refData[0][ref],refData[0][ref]];
   refData.forEach((d) => {
     if (d[ref] > top) top = d[ref];
     if (d[ref] < bottom) bottom = d[ref];
   });

   return [(bottom | 0) - offset,(top | 0) + offset];
 };

 

 const zoom = () => {
   let refareaLeft = refareaLeft;
   let refareaRight = refareaRight;
   let data = data;

   if (refareaLeft === refareaRight || refareaRight === "") {
     setRefareaLeft("");
     setRefareaRight("");
     return;
   }

   // xAxis domain
   if (refareaLeft > refareaRight) {
     setRefareaLeft(refareaRight);
     setRefareaRight(refareaLeft);
   }

   // yAxis domain
   const [bottom,top] = getAxisYDomain(refareaLeft,refareaRight,"cost",1);
   const [bottom2,top2] = getAxisYDomain(
     refareaLeft,"impression",50
   );

   setRefareaLeft("");
   setRefareaRight("");
   setData(data.slice());
   setLeft(refareaLeft);
   setRight(refareaRight);

  
 };


 const zoomOut = () => {
   var data = data;
   setData(data.slice);
   setRefareaLeft("");
   setRefareaRight("");
   setLeft("dataMin");
   setRight("dataMax");
   setTop("dataMax+1");
   setBottom("dataMin");
   setTop2("dataMax+50");
   setBottom2("dataMin+50");
 };


 return (
   <div className="highlight-bar-charts" style={{ userSelect: "none" }}>
     <button

       className="btn update"
       onClick={zoomOut}
     >
       Zoom Out
     </button>

     <LineChart
       width={800}
       height={400}
       data={data}
       onMouseDown={(e) => {
         setRefareaLeft(e.activeLabel);
       }}
       onMouseMove={(e) => {
         setRefareaRight(e.activeLabel);
       }}
  
       onmouseup={zoom}
     >
       <Cartesiangrid strokeDasharray="3 3" />
       <XAxis
         allowDataOverflow
         dataKey="name"
         domain={[left,right]}
         type="number"
       />
       <YAxis
         allowDataOverflow
         domain={[bottom,top]}
         type="number"
         yAxisId="1"
       />
       <YAxis
         orientation="right"
         allowDataOverflow
         domain={[bottom2,top2]}
         type="number"
         yAxisId="2"
       />
       <Tooltip />
       <Line
         yAxisId="1"
         type="natural"
         dataKey="cost"
         stroke="#8884d8"
         animationDuration={300}
       />
       <Line
         yAxisId="2"
         type="natural"
         dataKey="impression"
         stroke="#82ca9d"
         animationDuration={300}
       />

       {refareaLeft && refareaRight ? (
         <ReferenceArea
           yAxisId="1"
           x1={refareaLeft}
           x2={refareaRight}
           strokeOpacity={0.3}
         />
       ) : null}
     </LineChart>
   </div>
 );
};

export default ZoomIn;

如果你能帮助我，我将不胜感激:)

解决方法

尝试使用其他变量名

let _refAreaLeft = refAreaLeft;