如何解决Recharts - 使用 useState 钩子作为 Brush 的 onChange 的一部分可防止 Brush 更改值
我正在尝试将 Brush 组件中的 startIndex 和 endindex 值存储到状态,但使用“useState”挂钩将默认值锁定到位,这意味着用户无法使用 Brush。
状态正在成功设置,在初始加载时,如果用户单击“打印日期”,则会打印一个空字符串,如果他们尝试移动笔刷然后单击“打印日期”,则会打印默认范围。
import "./styles.css";
import {
ResponsiveContainer,LineChart,Line,XAxis,YAxis,Cartesiangrid,Brush
} from "recharts";
import { useState } from "react";
export default function App() {
const data = [
{ interval: "2021-01-01",resultCount: 2 },{ interval: "2021-01-03",resultCount: 7 },{ interval: "2021-01-05",resultCount: 1 }
];
const [dates,setDates] = useState("");
const printDates = (d) => console.log(d);
return (
<div className="App">
<button onClick={printDates(dates)}>print dates</button>
<ResponsiveContainer height={400} width={400}>
<LineChart data={data}>
<YAxis
dataKey="resultCount"
label={{
value: "No. of Posts",angle: -90,position: "insideLeft"
}}
/>
<XAxis
dataKey="interval"
label={{ value: "Time (day)",position: "bottom" }}
/>
<Cartesiangrid vertical={false} />
<Line
strokeWidth={2}
dataKey="resultCount"
stroke="#127ABF"
dot={{ stroke: "#127ABF",strokeWidth: 3,fill: "#127ABF" }}
isAnimationActive={false}
/>
<Brush dataKey="interval" onChange={(range) => setDates(range)} />
</LineChart>
</ResponsiveContainer>
</div>
);
}
解决方法
对于任何感兴趣的人,我已经通过将其全部重写为类组件并且根本不使用钩子来解决这个问题。尚未弄清楚实际问题,但至少这是一种解决方法。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。