为什么图表数据未显示？

Question

为什么图表数据未显示？

我传递到“数据”数组但是它什么也没显示……但是，如果您进行数据处理，那么一切都会起作用

我的数据

默认数据

我的文件（收入）仪表板> DashboardView>图表https://codesandbox.io/s/hopeful-glitter-c868j

// Charts.js
       const [chartOptions, setChartOptions] = useState({
         options: {
    	chart: {
    	  id: "basic-bar"
    	},
    	xaxis: {
    	  categories: moment.monthsShort()
    	}
    	},
    	series: [
    	 {
    	  name: "Доход",
    	  data: [incomeData] // My data - console.log(incomeData) - 4
    	 }
        ]
    });

Answer 1

将您的代码更改为仅具有一个状态对象，并且不像当前那样嵌套不同的状态。删除data: [incomeData]并使用单个状态对象来管理图表状态。

类似这样的东西：

import React, { useState, useEffect } from "react";
import Chart from "react-apexcharts";
import moment from "moment";
import "moment/locale/ru";

const ChartsView = props => {
  const { income } = props;

  
  const [chartOptions, setChartOptions] = useState({
    options: {
      chart: {
        id: "basic-bar"
      },
      xaxis: {
        categories: moment.monthsShort()
      }
    },
    series: [
      {
        name: "Доход",
        data: []
      }
    ]
  });

  const handleData = (dataFeed) => {

    const formattedDataFeed = 'format the data ready for the chart'

    setChartOptions({
      ...chartOptions, 
      series: [{
        name: chartOptions.series[0].name,
        data: [
          {
            ...chartOptions.series[0].data
          },
          {
            ...formattedDataFeed
          }
        ]
      }]
    })
  }

  return (
    <Chart
      options={chartOptions.options}
      series={chartOptions.series}
      type="area"
      width="100%"
      height="400px"
    />
  );
};

export default ChartsView;

您正在更改incomeData的状态，但没有更改与<Chart />相关的任何状态。您需要更改与<Chart />关联的状态，以便chartOptions。
我希望能奏效并提供帮助吗？