Как визуализировать объекты из JSON бэкэнда? (Ребенок не появляется)

Question

tldr: Мои объекты не отображаются.

Объяснение: Я получаю следующий объект JSON из серверной части:

{
  "queued": 0,
  "status": "on_timeout",
  "cartId": "1bcadd2fea88"
}

В моем методе componentDidMount() я веду журнал InfoData как объект после установления соединения socket.io с бэкэндом, и я могу сделать это успешно, как показано ниже в 1-м и 3-м журналах консоли. Третий журнал был проанализирован с использованием следующей строки: this.InfoData = JSON.parse(data)

Я пытался использовать keys и делать очень простой рендеринг (см. Код ниже), но безуспешно (я полагаю, что я не делаюони правы).

import React, { Component } from 'react'
import socketIOClient from 'socket.io-client'

class Information extends Component {
  constructor() {
    super()
    this.state = {
      InfoData: [],
      endpoint: 'http://someNetworkICantShare/admin'
    }
  }

  componentDidMount() {
    const { endpoint } = this.state
    const socket = socketIOClient(endpoint)
    socket.on('success', data => {
      console.log('data:\n', data)
      console.log('data.status:\n', data.status)
      this.InfoData = JSON.parse(data) //parsed
      console.log('parsed data:\n', JSON.parse(data))
      console.log('data.status after parsed:\n', data.status)
      console.log('status:\n', this.InfoData.status)
    })
  }

  render() {
    const { InfoData } = this.state
    console.log('IndoData:\n', InfoData)
    console.log('IndoData.cartId not returning:\n', InfoData.cartId)
      return (
          <div>
            <p>{InfoData}</p> {/** entire JSON is rendering */}
            <p>{InfoData.status}</p> {/** status is not rendering */}
          </div>
      )
  }
}

export default Information

Пожалуйста, дайте мне знать, если требуется дополнительная информация, и я прошу прощения, если это неправильно сформулировано.

Answer 1

Вы изменяете состояние

this.InfoData = JSON.parse(data)

Должно быть

this.setState({ InfoData : JSON.parse(data) })