Chart.js 图表显示但没有数据

Question

I'm using React with react-chartjs-2 I'm passing the data to the data. But I am getting a Graph without data.

ATT: inside the data I'm mapping a product object

 const [chartData, setChartData] = useState({})
    const products= [
        {name: "PC", solds: 34},
        {name: "Mouce", solds: 55},
        {name: "keyboard", solds: 6},
        {name: "Process", solds: 2},
    ]
    const chart = () => {
        setChartData({
            labels: ['PC', 'Mouse', 'Keyboard', 'Process' ],
            datasets: [{
                label: 'Level of Thiccness',
                data: [Object.entries(products).map(sold=> sold.solds)],
                backgroundColor: [
                    'rgba(75, 192, 192, 0.6)'
                ],
                borderWidth: 4
            }]
        })
    }

    useEffect(() => {
        chart();
    }, [])
    return (
        <div>
            <Line 
            data={chartData}
            />
        </div>
    )
}

Answer 1

your data in datasets params is not well formated,
try this:

const [chartData, setChartData] = useState({});
  const products = [
    { name: "PC", solds: 34 },
    { name: "Mouce", solds: 55 },
    { name: "keyboard", solds: 6 },
    { name: "Process", solds: 2 }
  ];
  const chart = () => {
    const dataValue = products.map(prod=>prod.solds);
    setChartData({
      labels: ["PC", "Mouse", "Keyboard", "Process"],
      datasets: [
        {
          label: "Level of Thiccness",
          data: dataValue,
          backgroundColor: ["rgba(75, 192, 192, 0.6)"],
          borderWidth: 4
        }
      ]
    });
  };

  useEffect(() => {
    chart();
  }, []);

  return (
    <div>
      <Line data={chartData} />
    </div>
  );

here you can find an example
UPDATE
you can do the same for your labels param:

const chart = () => {
    const dataValue = products.map((prod) => prod.solds);
    const labelList = products.map((prod) => prod.name);
    setChartData({
      labels: labelList,
      datasets: [
        {
          label: "Level of Thiccness",
          data: dataValue,
          backgroundColor: ["rgba(75, 192, 192, 0.6)"],
          borderWidth: 4
        }
      ]
    });