如何从后端的 JSON 渲染 objects？（Child 未出现）

Question

tldr: 我的 object 没有渲染。

说明：我正在从后端检索以下 JSON object：

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

在我的 componentDidMount() 方法中，在与后端建立 socket.io 连接后，我将 InfoData 记录为 object 并且能够成功完成，如图所示在第一个和第三个控制台日志中。第 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) })

如何从后端的 JSON 渲染 objects？（Child 未出现）

How to render objects from the backend's JSON? (Child not showing up)

json

render

socket.io

reactjs

如何从后端的 JSON 渲染 objects？ （Child 未出现）

How to render objects from the backend's JSON? (Child not showing up)

json

render

socket.io

reactjs

如何从后端的 JSON 渲染 objects？（Child 未出现）