使用 react 显示 JSON 输出答案

【问题标题】：Display JSON output using react使用 react 显示 JSON 输出
【发布时间】：2021-09-14 00:24:10
【问题描述】：

import React from 'react'
import ReactDOM from 'react-dom'
import axios from 'axios'

class ToDoList extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      lists: []
    }
  }

  componentDidMount() {
    axios.get('http://localhost:3001/api/v1/lists.json')
    .then(response => {
      console.log(response.data);
      this.setState({lists: response.data})
    })
  }

  render() {
    return(
      <div>
        {this.state.lists.map((list) => {
          return(
            <div key={list.id}>
              <h1>{list}</h1>
            </div>
          )
        })}
      </div>
    )
  }
}

ReactDOM.render(<ToDoList/>, document.getElementById('root'))

我正在做简单的反应应用程序只是想显示 json 输出，但是收到此错误对象作为 React 孩子无效，请如果有人能让我走上正轨

【问题讨论】：

你能试试JSON.stringify()这样的东西吗：<h1>{JSON.stringify(list)}</h1>
可能没有传递一个普通的对象来渲染？ list 对象还有哪些其他属性？
如果你真的有 json，你可以像显示任何其他字符串一样显示它。

标签： javascript reactjs

【解决方案1】：

您“只想显示 json 输出”，但没有任何 JSON。 JSON是一种数据序列化格式； Axios 将它从服务器获取的 JSON 反序列化并为您提供结果，在本例中是一个对象数组。

由于 React 不知道如何渲染一个普通的对象，你不能只是把它放在你的 JSX 中并期望它工作。你需要把它变成 React 知道如何渲染的东西。在最简单的情况下，这是一个字符串，因此使用JSON.stringify 将其转回 JSON 字符串。出于调试目的，通过传递多个空格作为第三个参数来使其缩进可能会有所帮助，并将其包装在 <pre> 标记中。您可以在下面看到这一点。

class ToDoList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      lists: [ { id: 1, name: "foo" }, { id: 2, name: "bar" } ],
    };
  }

  render() {
    return (
      <div>
        {this.state.lists.map(list => ( 
          <div key={list.id}>
            <pre>{
              JSON.stringify(list, null, 2)
            }</pre>
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<ToDoList/>, document.querySelector('div'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div></div>

【讨论】：

【解决方案2】：

render() {
    return (
      <div>
        <div>
            New Idea
        </div>
        {this.state.lists.map((x) => {
            return (<div>
              <p>List: {x.job_name}, Status: {x.status} , Created On: {x.created_at}</p>
            </div>)
        })}
      </div>
    );
  }

感谢大家，根据@chazsolo 的建议，这实际上与退货有关。

【讨论】：

【解决方案3】：

您正在直接显示一个 JSON 对象。在显示列表之前，您必须将其从对象转换为字符串。

import React from 'react'
import ReactDOM from 'react-dom'
import axios from 'axios'

class ToDoList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      lists: []
    }
  }
  componentDidMount() {
    axios.get('http://localhost:3001/api/v1/lists.json')
      .then(response => {
      console.log(response.data);
      this.setState({lists: response.data})
    })
  }
  render() {
    return(
      <div>
        {this.state.lists.map((list) => {
          return(
            <div key={list.id}>
              <pre>
                <h1>{JSON.stringify(list)}</h1>
              </pre>
            </div>
          )
        })}
      </div>
    )
  }

}

【讨论】：

【解决方案4】：

在http://localhost:3001/ 之后键入您的 JSON 文件目录： Mydata.json 是我的 JSON 文件名，你输入你的文件名：不要忘记在顶部导入 axios。 *

componentDidMount() {
    axios.get('http://localhost:3001/../static/data/Mydata.json')
      .then(response => {
      console.log(response.data)
      this.setState({lists: response.data})
    })
 }

【讨论】：