如何使用useState()更新react-chartjs-2绘图

Question

我正在尝试更新一个react chartjs-2绘图，将新的获取日期作为道具从App.js传递到Chart.js组件。

我已经创建了一个按钮，该按钮链接到一个在主应用程序中调用useState的函数。

目前，我已经创建了两个数据集“data2”和“data 3”，该按钮应该用“data3”中的数据更新情节。然而，每当我单击该按钮，而不是更新该情节时，它就会变为空白。

我有一种感觉，我没有使用正确的方法来更新情节，但我没有找到很多关于它的信息。

Chart.js

import { Line } from 'react-chartjs-2';



const Chart = ({ data, options, onUpdate }) => {

  const onClick = (e) => {
    e.preventDefault()

    onUpdate()
    console.log(data)
  }

  const dataIn = data[0];
  const optionsIn = options[0];
  
  return(
  <>
    <div className='header'>
      <h1 className='title'>Plot</h1>
      <div className='links'>
        <a
          className='btn btn-gh'
          onClick = {onClick}
        >
          Update plot
        </a>
      </div>
    </div>
    <Line data={dataIn} options={optionsIn} />
  </>
  )
}


export default Chart; 

App.js

import { useState, useEffect } from 'react'
import Chart from './components/Chart'

function App() {

  const data2 = {
  labels: ['1', '2', '3', '4', '5', '6'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      fill: false,
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgba(255, 99, 132, 0.2)',
    },
  ],
};

  const data3 = {
  labels: ['1', '2', '3', '4', '5', '6'],
  datasets: [
    {
      label: '# of Votes',
      data: [3, 2, 5, 3, 19, 12],
      fill: false,
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgba(255, 99, 132, 0.2)',
    },
  ],
};

const options2 = {
  scales: {
    yAxes: [
      {
        ticks: {
          beginAtZero: true,
        },
      },
    ],
  },
};

  const [data, setData] = useState([
    data2
  ])

  const [options, setOptions] = useState([
    options2
  ])


  const updatePlot = () => {
    setData(data3)
    setOptions(options2)
  }


  return (
    <div class="row">
    <Chart data={data} options={options} onUpdate={updatePlot} />
    </div>

  );
}

export default App;

Answer 1

您的代码在useState钩子中有一个括号太多(或者在updatePlot函数中有一个太少)。下面的代码运行良好。

Chart.js

import { Line } from "react-chartjs-2";

const Chart = ({ data, options, onUpdate }) => {
  // const dataIn = data[0]; COMMENTED OUT
  // const optionsIn = options[0]; COMMENTED OUT
  // REMOVED onClick function

  return (
    <>
      <div className="header">
        <h1 className="title">Plot</h1>
        <div className="links">
          <a className="btn btn-gh" onClick={onUpdate}>
            Update plot
          </a>
        </div>
      </div>
      <Line data={data} options={options} />
    </>
  );
};

export default Chart;

App.js

import { useState } from "react";
import Chart from "./Chart";

function App() {
  var chartReference = {};

  const data2 = {
    labels: ["1", "2", "3", "4", "5", "6"],
    datasets: [
      {
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        fill: false,
        backgroundColor: "rgb(255, 99, 132)",
        borderColor: "rgba(255, 99, 132, 0.2)",
      },
    ],
  };

  const data3 = {
    labels: ["1", "2", "3", "4", "5", "6"],
    datasets: [
      {
        label: "# of Votes",
        data: [3, 2, 5, 3, 19, 12],
        fill: false,
        backgroundColor: "rgb(255, 99, 132)",
        borderColor: "rgba(255, 99, 132, 0.2)",
      },
    ],
  };

  const options2 = {
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  };

  const [data, setData] = useState(data2); // REMOVED BRACKETS
  const [options, setOptions] = useState(options2); // REMOVED BRACKETS

  const updatePlot = () => {
    setData(data3);
    setOptions(options2); // This is redundant for the purpose
  };

  return (
    <div class="row">
      <Chart data={data} options={options} onUpdate={updatePlot} />
    </div>
  );
}

export default App;