Как извлечь JSON данных, извлеченных из API и передать в ответ-заговор?

Question

В ответ на запрос 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>
    );

}

И результат в журнале консоли выглядит примерно так:

Любой Буду признателен за такой совет или предложение.

Answer 1

напишите ваши логики c, используя объект response.data. Сопоставьте response.data.object с вашей моделью пользовательского интерфейса, а затем обновите состояние реагирующего компонента, который в конечном итоге вызовет метод рендеринга для повторного рендеринга компонента. Смотрите пример ниже.

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
}