Recharts - 使用 useState 钩子作为 Brush 的 onChange 的一部分可防止 Brush 更改值

问题描述

我正在尝试将 Brush 组件中的 startIndex 和 endindex 值存储到状态，但使用“useState”挂钩将默认值锁定到位，这意味着用户无法使用 Brush。

状态正在成功设置，在初始加载时，如果用户单击“打印日期”，则会打印一个空字符串，如果他们尝试移动笔刷然后单击“打印日期”，则会打印默认范围。

可以在 here 中找到有问题的 CodesandBox。

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

解决方法

对于任何感兴趣的人，我已经通过将其全部重写为类组件并且根本不使用钩子来解决这个问题。尚未弄清楚实际问题，但至少这是一种解决方法。