Question

我能够获取REST API，可以在其中获得嵌套的json输出，并且希望它们显示在React组件中。现在，我只能在控制台中渲染它们，这实际上并不是我的目标。我想知道是否存在一种有效的方法来在React中渲染嵌套的json列表。谁能给我一个可能的想法来完成这项工作？

这是我所做的：

import React, { Component } from "react";

class JsonItem extends Component {
  render() {
    return <li>
      { this.props.name }
      { this.props.children }
    </li>
  }
}

export default class List extends Component {
  constructor(props){
    super(props)
    this.state = {
    data: []
    }
  };   
  componentDidMount() {
      fetch("/students")
      .then(res => res.json())
      .then(json => {
          this.setState({
          data: json
          });
      });
  }
  list(data) {
    const children = (items) => {
      if (items) {
        return <ul>{ this.list(items) }</ul>
      }
    }
    return data.map((node, index) => {
      return <JsonItem key={ node.id } name={ node.name }>
        { children(node.items) }
      </JsonItem>
    });
  }
  render() {
    return <ul>
      { this.list(this.props.data) }
    </ul>
  }
}

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

我当前的输出：

在上述组件中，我可以在控制台上渲染嵌套列表，如下所示：

[！[在此处输入图片描述] [1]] [1]

所需的输出：

如何在React上正确渲染嵌套的json输出？有什么想法可以做到这一点吗？任何想法？谢谢

Answer 1

您知道.map()是解决此问题的常见方法。但是您可以像下面这样使它变得更好。

export default class List extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: [],
      isLoaded: false,   //initally the loading state is false.
    }
  };

  componentDidMount() {
      fetch("/students")
      .then(res => res.json())
      .then(json => {
          //updating the loading state and data. 
          this.setState({data: json, isLoaded:true}); 
      });
  }

  render() {
   //Waiting ajax response or ajax not yet triggered.  
   if(!this.state.isLoaded){
     return(<div>Loading...</div>);
     }else{
       //Rendering the data from state.
       let studenDetails = this.state.data.map((student, i) => {
         let uin = student.uin; 
         let studentInfo = Object.keys(student.studentInfo).map((label, i) => {
         return (
            <div key={i}>
              <span>
               <strong>{label}: </strong>{`${student.studentInfo[label]}`}
              </span>
            </div>
         );
        });
        return (
         <div key={i}>
           <h3>{uin}</h3>
           <p>{studentInfo}</p>
          </div>
        );
       });
      return (<div>{studenDetails}</div>);
     }
    }
   }

希望它会对您有所帮助。

Answer 2

要在react中呈现列表，请使用.map()函数来构建jsx元素的列表。

render() { 
  let myRenderedData = this.state.data.map((x, index) => {
    return <p key={index}>{x.uin}</p>
  })
  return (<div>{myRenderedData}</div>)
}

任何有效的方法来在React中渲染嵌套的json列表？

2 个答案: