React实现用户输入添加数据至雷达图的问题求助

你的代码问题在于静态数据未通过React状态管理，且表单没有处理提交逻辑，导致添加数据后图表无法更新。以下是修复方案：

核心修改点 #

• 用useState管理图表数据，状态变化触发组件重渲染
• 把输入框改成受控组件，同步用户输入到状态
• 处理表单提交事件，将新数据追加到图表数据中
• 确保输入的数值转为数字类型（Chart.js要求数值格式）

完整修复代码 #

import './App.css';
import React, { useState } from 'react'
import {
    Chart as ChartJS,
    RadialLinearScale,
    PointElement,
    LineElement,
    Filler,
    Tooltip,
    Legend
} from "chart.js";
import { Radar } from "react-chartjs-2";

ChartJS.register(
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend
);

function App() {
  // 用useState管理图表数据
  const [chartData, setChartData] = useState({
    labels: ["Business 1", "Business 2", "Business 3"],
    datasets: [
      {
        label: "Number of Businesses",
        data: [1300, 400, 160],
        backgroundColor: "rgba(255, 99, 132, 0.2)",
        borderColor: "rgba(255, 99, 132, 1)",
        borderWidth: 1
      }
    ]
  });

  // 管理输入框值
  const [newLabel, setNewLabel] = useState('');
  const [newValue, setNewValue] = useState('');

  // 处理表单提交
  const handleAddData = (e) => {
    e.preventDefault();
    // 验证输入不为空，且数值有效
    if (!newLabel || isNaN(Number(newValue))) return;

    setChartData(prevData => ({
      ...prevData,
      labels: [...prevData.labels, newLabel],
      datasets: prevData.datasets.map(dataset => ({
        ...dataset,
        data: [...dataset.data, Number(newValue)]
      }))
    }));

    // 清空输入框
    setNewLabel('');
    setNewValue('');
  };

  return (
    <div className='App'>
      <Radar data={chartData} />

      <form onSubmit={handleAddData}>
        <input 
          type='text' 
          placeholder='Label' 
          value={newLabel}
          onChange={(e) => setNewLabel(e.target.value)}
        />
        <input 
          type='number'  // 改成number类型更合理
          placeholder='Value' 
          value={newValue}
          onChange={(e) => setNewValue(e.target.value)}
        />
        <button type="submit">Add Data</button>
      </form>
    </div>
  );
}

export default App;

关键说明 #

1. 状态管理：chartData是响应式状态，修改时通过setChartData更新，React会自动重渲染Radar组件
2. 受控输入：输入框的value绑定到状态，onChange同步输入值，确保输入可控
3. 表单提交：handleAddData阻止默认提交行为，验证输入后，通过展开运算符复制原数据并追加新内容，避免直接修改状态
4. 类型转换：将输入的newValue转为Number，保证Chart.js能正确解析数值

内容的提问来源于stack exchange，提问作者Bardyli