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

我无法显示从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;

import React，{Component}来自'React'；
从“axios”导入axios；
类应用程序扩展组件{
构造函数（）{
超级（）；
这个州={
课程：[]
};
}
componentDidMount（）{
get（'myURL'）
。然后（响应=>{
这是我的国家({
课程：响应。数据
});
});
}
_getCourses（）{
const data=this.state.courses；
const courseItem=data.map（（课程、索引）=>(
页码：course.ageNo


课程：
ID:{Course.ID}
主题：{course.SUBJECT}
校园：{course.CAMPUS}

));
render（）{
const courses=这个；
返回(
{courses}
);
}
}
导出默认应用程序；

谢谢

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'));

在

componentDidMount

中，您当前正在将课程设置为仅

response.data

。这是响应的外部数组。课程数组是内部数组。因此，您需要将课程设置为

response.data[0].Items

。如果您希望在

response.data

数组中有多个条目，则可能还需要迭代该数组

componentDidMount() {
    axios.get('http://localhost:8080')
        .then(response => {
            this.setState({
                courses: response.data[0].Items
            });
        });
}

在

\u 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;
}

---

谢谢！我在const data=this.state.courses.slice（0）行收到错误“TypeError:this.state.courses.slice不是函数”；控制台日志返回数据数组。请看我在stackblitz上运行的示例。只需将其复制到编辑器中，在使用axios之前使其使用假数据。我猜您存储在状态中的数据不是数组，这就是它不允许您切片的原因。代码使用假数据数组，而不是从api返回的JSON数据格式调用。好的，给我你的API链接。不幸的是，API链接现在受密码保护。我这里只能有JSON数据格式。

_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;
}

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

    componentDidMount() { ... }

    _getCourses() { ... }

    render() { ... }
}