错误TS2304:找不到名称:传递参数以响应功能组件

Question

使用此代码：

import ReactEChartsCore from 'echarts-for-react/lib/core';
// Import the echarts core module, which provides the necessary interfaces for using echarts.
import * as echarts from 'echarts/core';
// import components, all suffixed with Component
import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
  DatasetComponent,
} from 'echarts/components';
// Import renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step
import {
  CanvasRenderer,
} from 'echarts/renderers';

function App_D() {
  const options = {
    grid: { top: 8, right: 8, bottom: 24, left: 36, containLabel: true },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        //type: 'bar',
        //type: 'radar',
        smooth: true,
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
  };

    return (
      <div className='container'>
        <h1 className='heading'>
            Data & Context Visualization
        </h1>

        <ReactECharts option={options} />;


      </div>
    );
}

export default App_D;

我得到了正确的图表。

但是有了这个代码：

echarts.tsx：

import ReactECharts from 'echarts-for-react'

// import the core library.
import ReactEChartsCore from 'echarts-for-react/lib/core';
// Import the echarts core module, which provides the necessary interfaces for using echarts.
import * as echarts from 'echarts/core';

// import components, all suffixed with Component
import {

  GridComponent,
  TooltipComponent,
  TitleComponent,
  DatasetComponent,
} from 'echarts/components';
// Import renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step
import {
  CanvasRenderer,
} from 'echarts/renderers';

interface Props {
  chartType: string;
  seriesData: number[];
  xAxisType: string;
  xAxisData: string[];
}

export default function EchartDeploy({
  chartType,
  seriesData,
  xAxisType,
  xAxisData
}: Props) {

  React.useEffect(() => {
    echarts.use(
      [TitleComponent, TooltipComponent, GridComponent, CanvasRenderer]
    )
  }, [])

  const options = {
    grid: { top: 8, right: 8, bottom: 24, left: 36, containLabel: true },
    aAxis: {
      type: xAxisType,
      data: xAxisData,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      seriesData,
      chartType,
    ],
    tooltip: {
      trigger: 'axis',
    },
  }

  return (
    <ReactECharts option={options} />
  );
}

App_D.tsx：

import EchartDeploy from './dataVisualize/echarts'

function App_D() {

    let [chart_type, setChart_type] = React.useState("")
    let [series_data, setSeries_data] = React.useState<number[]>([])
    let [xAxis_type, setXAxis_type] = React.useState("")
    let [xAxis_data, setXAxis_data] = React.useState<string[]>([])

    setChart_type('line')
    setSeries_data([820, 932, 901, 934, 1290, 1330, 1320])
    setXAxis_type('category')
    setXAxis_data(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'])


    return (
      <div className='container'>
        <h1 className='heading'>
            Data & Context Visualization
        </h1>

        <EchartDeploy
          chartType={chart_type}
          seriesData={series_data}
          xAxisType={xAxis_type}
          xAxisData={xAxis_data}
        />
      </div>
    );
}

export default App_D;

我不再收到错误信息，也没有图表。

我做错什么了？如何将参数传递给反应功能组件？

Answer 1

      function App_D() {
           //here should be defind all of yours useStates() for chart_type/series_data etc.
        
        useEffect(() => { 
           //all of your setters
        }, []); //with an empty dependency array

            return (
              <div className='container'>
                <h1 className='heading'>
                    Data & Context Visualization
                </h1>
        
                <EchartDeploy
                  chartType={chart_type}
                  seriesData={series_data}
                  xAxisType={xAxis_type}
                  xAxisData={xAxis_data}
                />
              </div>
            )