Javascript 在React中呈现嵌套json列表有什么有效的方法吗？

我能够获取restapi，在这里我可以得到嵌套的

json

输出，我希望它们显示在React组件中。现在我只能在控制台中渲染它们，这实际上不是我的目标。我想知道是否有一种有效的方法可以在React中呈现嵌套的

json

列表。有人能给我一个可行的办法让这一切顺利进行吗

以下是我所做的：

import React，{Component}来自“React”；
类JsonItem扩展了组件{
render（）{
返回

{this.props.name}
{this.props.children}

}
}
导出默认类列表扩展组件{
建造师（道具）{
超级（道具）
此.state={
数据：[]
}
};   
componentDidMount（）{
取回（“/学生”）
.then（res=>res.json（））
。然后（json=>{
这是我的国家({
数据：json
});
});
}
列表（数据）{
常量子项=（项）=>{
若有（项目）{
返回
{this.list（items）}
}
}
返回数据.map（（节点，索引）=>{
返回
{子节点（node.items）}
});
}
render（）{
返回

{this.list（this.props.data）}

}
}

---

要在react中呈现列表，请使用

.map（）

函数构建

jsx

元素的列表

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

render（）{
让MyRenderData=this.state.data.map（（x，index）=>{
返回
{x.uin}
})
返回（{MyRenderData}）
}

正如您所知，

.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>);
     }
    }
   }

导出默认类列表扩展组件{
建造师（道具）{
超级（道具）
此.state={
数据：[]，
isLoaded:false，//初始加载状态为false。
}
};
componentDidMount（）{
取回（“/学生”）
.then（res=>res.json（））
。然后（json=>{
//正在更新加载状态和数据。
this.setState（{data:json，isLoaded:true}）；
});
}
render（）{
//正在等待ajax响应或ajax尚未触发。
如果（！this.state.isLoaded）{
返回（加载…）；
}否则{
//从状态呈现数据。
让studenDetails=this.state.data.map（（学生，i）=>{
设uin=student.uin；
让studentInfo=Object.keys（student.studentInfo.map）（（label，i）=>{
返回(
{label}:{${student.studentInfo[label]}
);
});
返回(
{uin}
{studentInfo}

);
});
返回（{studenDetails}）；
}
}
}

---

希望它能对你有所帮助。

你缺少钥匙

key={x.someUniqueKey}

@Gonzalo.-你能提供完整的工作示例吗？thanks@beyond_inifinity不，您不需要使用

jsonim

组件来呈现列表。如果您告诉我您遇到了什么错误，我可能可以帮助您。假设

uin

作为数据集上的一个属性存在，那么这个答案没有错。如果要显示其他字段，请执行

x.studentInfo.firstName

等操作。@beyond\infinity好的，但是错误消息说什么？我不能为你做一切。我不通灵。我更新了答案以使其更容易理解。给我一分钟。让我更新答案@超越有限性如果你能在小提琴上用一个完全有效的例子来编译你的解决方案，那将是一个巨大的优势。谢谢你给出了答案@beyond_inifinity如何折叠或扩展学生信息以进行渲染？比如访问uin和学生信息？你能指引我吗？感谢您的绝妙解决方案。您是否只需要使用按uin排序进行折叠/扩展？或者更多。如果您需要更多信息，只需在

RectTable

中呈现这些信息，它将负责搜索、排序和分页@无限