Question

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（，document.getElementById（＆＃39; root＆＃39;））

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

Answer 1

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的建议，这实际上与回归有关。

Answer 2

你“只想显示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>

Answer 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.stringfy(list)}</h1>
              </pre>
            </div>
          )
        })}
      </div>
    )
  }

}

Answer 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})
    })
 }

使用react

4 个答案: