从 js 文件调用数据以响应组件

Question

我的 src/assets 文件夹中有一个包含一些数据的 js 文件。 我需要将该数据调用到我的反应组件中，以在 PLotly.js 的图表中显示它

我曾尝试调用数据，但一直收到错误消息，提示找不到路径。 我应该把它变成一个 json 文件吗？

我的数据文件：

{
    "data":[
      {
        "x": [40, 80, 120, 160, 200, 240, 280, 320, 360, 400, 440, 480, 520, 560,],
        "y": [-11.98752097, -11.98587175, -11.9840901,  -11.98657347, -11.98618678, -11.98618678],
        "type": "scatter",
        "name":"logResPerm",
        "mode": "lines+markers",
        "marker": "{color:'red'}",
      },
    ]
}

反应组件：

export const ScatterChart= () => { 
    return (
        <Plot {data.map((data,key)=>{
            return(
                {data}
            )
        })}/>
    )
}

Answer 1

将其写为变量并导出

 export const chartData = {
            "data":[
              {
                "x": [40, 80, 120, 160, 200, 240, 280, 320, 360, 400, 440, 480, 520, 560,],
                "y": [-11.98752097, -11.98587175, -11.9840901,  -11.98657347, -11.98618678, -11.98618678],
                "type": "scatter",
                "name":"logResPerm",
                "mode": "lines+markers",
                "marker": "{color:'red'}",
              },
            ]
        }

在您的组件中，您需要导入它

import { chartData } from 'path/to/file'

export const ScatterChart = () => { 
    ... do code here, like chartData.data.map() 
}