Question

我无法显示从api调用中检索到的嵌套数组数据。 JSON数据格式如下：

[
  {
   pageNo: 1
   TotalRecordsCount: 8000,
   Items: [
   {
    id: 1,
    subject: "ACCOUNTING",
    campus: "campus A"
   },

     {
    id: 1,
    subject: "ACCOUNTING",
    campus: "campus A"
     },
  ...
  }

 ]

编辑数据格式：

Items: [{subject: ACCOUNTING, CAMPUS: CAMPUS A}, {subject: ACCOUNTING, campus: CAMPUS A}...]
PageNo: 1
TotalRecordCount: 8000

JSON格式。

如何在ReactJS中访问主题，校园等数据？我收到错误消息：对象作为React子对象无效（找到：带有键{courseItem}的对象）。

App.js

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
 constructor() {
 super();
 this.state ={
  courses:[]
 };
 }
 componentDidMount(){
 axios.get('myURL')
 .then(response=>{
  this.setState({
    courses:response.data
  });
  });
}
_getCourses(){
const data=this.state.courses;
const courseItem=data.map((course,index)=>(
<div>
  Page No: course.ageNo  <br />
  <div className="courseItem"><ul>
  Course: <li>ID:{course.id}
  SUBJECT:{course.subject}
  CAMPUS: {course.campus} </li>
  </ul></div>
</div>
));
render() {
const courses= this._getCourses();
return (
  <div className="App">
   <div className="courseResults">
   {courses}    
   </div>
  </div>
);
}
}
export default App;

谢谢。

Answer 1

您目前在componentDidMount中将课程设置为response.data。这是您的回应的外部数组。 Courses数组是内部数组。因此，您需要将课程设置为response.data[0].Items。如果您希望在那里有多个条目，也许也想遍历response.data数组。
```
componentDidMount() {
    axios.get('http://localhost:8080')
        .then(response => {
            this.setState({
                courses: response.data[0].Items
            });
        });
}
```

在_getCourses中，您需要返回courseItems变量：

_getCourses() {
    const data = this.state.courses;
    const courseItems = data.map((course, index) => (
        <div>
            Page No: course.ageNo  <br />
            <div className="courseItem"><ul>
                Course: <li>ID:{course.id}
                    SUBJECT:{course.subject}
                    CAMPUS: {course.campus} </li>
            </ul></div>
        </div>
    ));
    return courseItems;
}

您在render内拥有_getCourses函数，并且必须在类级别上处于同一级别：

class App extends Component {
    constructor() { ... }

    componentDidMount() { ... }

    _getCourses() { ... }

    render() { ... }
}

Answer 2

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  constructor() {
    super();
    this.state = {
      courses: [
        {
          pageNo: 1,
          TotalRecordsCount: 8000,
          Items: [
            {
              id: 1,
              subject: "ACCOUNTING",
              campus: "campus A"
            },
            {
              id: 1,
              subject: "ACCOUNTING",
              campus: "campus A"
            }
          ]
        }
      ]
    }
  }

  _getCourses() {
    const data = this.state.courses.slice(0);
    const courseItem = data.map((course, index) => (
      <div>
        Page No: course.ageNo  <br />
        <div className="courseItem">
          <ul>
            {course.Items.map((details, index) => (
              <React.Fragment>
                <li>
                  Course:  ID:{details.id}
                </li>
                <li>
                  SUBJECT:{details.subject}
                </li>
                <li>
                  CAMPUS: {details.campus}
                </li>
              </React.Fragment>))}
          </ul>
        </div>
      </div>
    ))
    return courseItem;
  }

  render() {
    return (
      <div className="App">
        <div className="courseResults">
          {this._getCourses()}
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

https://stackblitz.com/edit/react-mnh5ex?embed=1&file=index.js

您需要在_getCourse函数中返回courseItem。否则，当您在render函数中调用_getCourse时，它将不会呈现任何html。

您还需要访问Items，因为Items包含您要访问的数据。

    {
      id: 1,
      subject: "ACCOUNTING",
      campus: "campus A"
    },
    {
      id: 1,
      subject: "ACCOUNTING",
      campus: "campus A"
    }

如何在ReactJS中以JSON显示嵌套数组数据？

2 个答案: