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

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} 的对象）。

应用程序.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

1. 在componentDidMount您当前将课程设置为仅response.data 。 这是您响应中的外部数组。 course 数组是内部数组。 因此，您需要将课程设置为response.data[0].Items 。 如果您希望那里有多个条目，也许您还想遍历response.data数组。

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

2. 在_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; }

3. 你在_getCourses有render函数，它必须在同一级别，在类级别：

    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。 否则，当您在渲染函数中调用 _getCourse 时，它​​不会渲染任何 html。

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

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