Javascript 如何提取从API获取的JSON数据并将其传递到react plotly？

在对POST请求的响应中，我得到了以下JSON数据

{"chart":
  {
  "data":[
    {
    "x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
    "y": [0, 3, 6, 4, 5, 2, 3, 5, 4],
    "type": "scatter",
    "name":"Plot 1"
    },
    {
    "x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
    "y": [0, 4, 7, 8, 3, 6, 3, 3, 4],
    "type": "scatter",
    "name":"Plot 2"
    },
    {
    "x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
    "y": [0, 5, 3, 10, 5.33, 2.24, 4.4, 5.1, 7.2],
    "type": "scatter",
    "name":"Plot 3"
    }
  ],

  "layout":{
   "showlegend": true,
   "legend": {"orientation": "h"}
  }
 }
}

现在，我已经得到了响应，但无法按预期绘制图表。以下是我到目前为止编写的js代码

const dataForPost = {
    dataset_id: 1,
    features: [],
    analysis_level: 1
};

export default function DomainAssesment(){

    const [graphData, setGraphData] = useState('');
    const postData = (event) => {
        axios.post('http://localhost:5000/Plot', dataForPost)
         .then((response) =>{        
            setGraphData(response.data.chart);
            console.log(graphData);
         });
    }

    return (
        <Container>
            <Button className="success" onClick={postData}>Get Graph</Button>
            <Plot data={graphData.data} layout={graphData.layout} />
        </Container>
    );

}

const dataForPost={
数据集_id:1，
特点：[]，
分析单元级别：1
};
导出默认函数DomainAssesment（）{
常量[graphData，setGraphData]=useState（“”）；
const postData=（事件）=>{
轴心柱http://localhost:5000/Plot”，dataForPost）
.然后（（响应）=>{
setGraphData（response.data.chart）；
控制台日志（graphData）；
});
}
返回(
获取图形
);
}

控制台日志中的结果是这样的，

---

任何形式的建议都将不胜感激。

使用response.data对象编写您的逻辑。将response.data.object映射到您的UI模型，然后更新react组件的状态，这将最终调用render方法再次渲染组件。见下面的例子

private getBoardings = () => {
const uri = "YOUR_URL"; //get or post whatever it is
trackPromise(
  this._ajaxhelper.get(uri,
    (response) => { this.listOnboardingSuccess(response); },
    (error) => { this.listOnboardingFailure(error); }));
}

private listOnboardingSuccess(response: any) {
       const boardings = [] as IboardingContext[];
       response.data.boardings.map((boarding: any) => {
             if (boarding != null) {
                 boardings = this.OnboardingMapping(boarding); //mapping of response
             }
       });
       this.setState({ boards: [...boards], loading: false }); //Update state here
}