React / JavaScript / Plotly - 在绘图设置之外使用数据（附实例）

我有一个问题，如何在plot(ly)设置之外使用一个数据集。我现在做了一个这样的例子。

linechart.js

class LineChart extends Component {
    render(){
        return (
            <Plot 
                data={[
                    {
                        x: ['11/07/2020','11/08/2020','11/09/2020',
                        '11/10/2020','11/11/2020','11/12/2020',
                        '11/13/2020','11/14/2020','11/15/2020',
                        '11/16/2020','11/17/2020','11/18/2020',
                        '11/19/2020','11/20/2020','11/21/2020',
                        '11/22/2020','11/23/2020','11/24/2020',
                        '11/25/2020','11/26/2020','11/27/2020'],
                        y: [55, 60, 20,
                        25,30,36,
                        60, 75, 10,
                        15,17,26,
                        30,44,60,
                        65,20,33,
                        15,70,74],
                        type: 'scatter',
                        name: 'Predicted',
                    },
                    {
                        x: ['11/07/2020','11/08/2020','11/09/2020',
                        '11/10/2020','11/11/2020','11/12/2020',
                        '11/13/2020','11/14/2020','11/15/2020',
                        '11/16/2020','11/17/2020','11/18/2020',
                        '11/19/2020','11/20/2020','11/21/2020',
                        '11/22/2020','11/23/2020','11/24/2020',
                        '11/25/2020','11/26/2020','11/27/2020'],
                        y: [54, 54, 21,
                            28,34,37,
                            55],
                        type: 'scatter',
                        name: 'Acutal',
                    }

                ]}
                layout={ { tick0: 13, width: 1000, height: 500, title: 'a simple line chart'}}
            />
        )
    }

}

export default LineChart;

App.js

import './App.css';
import React, { useState } from "react";
import LineChart from './Linechart';

function App() {
  return (
    <div className="App">
      <LineChart />
    </div>
    
  );
}

这是我第一次尝试设置一个react应用，所以这可能是一个简单的问题，但我想做的是使用我放在另一个脚本（data.js）中的数据，而不是现在写在linechart.js中的数据。

我把data.js中的数据设置成这样：

const data = [
    {
    Category: "Red",
    date: "11/07/2020",
    predicted: 10,
    actual: 12,
    },
    {
    Category: "Red",
    date: "11/08/2020",
    predicted: 12,
    actual: 13
    },
    {
    Category: "Green",
    date: "11/07/2020",
    predicted: 14,
    actual: 16
    },
    {
    Category: "Green",
    date: "11/08/2020",
    predicted: 10,
    actual: 12
    },
]

export default data;

我想在data.js的datapoints(4)的基础上，让plotly绘图。有2条线，一条是 "实际"，另一条是 "预测"。（这只是给我2条超短的线，但我只是为自己设置了这个非常简单的例子，以了解我如何能在一般情况下这样做）。

问题是，我真的不知道如何将数据从data.js转移到线图上。我试过像this.props.data ，但我并不真正了解它，我注意到。

谁能帮帮我？