如何在react js中映射嵌套的json数据

如何在react js中映射一个嵌套的json数据 示例我想显示从api接收到的产品图像

export class Planview extends Component{
 constructor() {
 super();
 this.state = {
 package: [],
 };
 }
componentDidMount() {
const ProdID = this.props.match.params.ProductID
fetch(`http://127.0.0.1:8000/api/plan/${ProdID}/`)
.then(response => response.json())
.then(responseData => { 
  this.setState({
    package: responseData
  });
})
.catch(error => {
  console.log('Error fetching and parsing data', error);
});
}
render(){
return(<>
<div className="container mar" >
    <h1 className="my-4">{this.state.package.title}</h1>
<div className="row">
    <div className="col-md-offset-2">
        <div className="row" id="gradient">
            <div className="col-md-6 img-responsive">
                <img 
                className ="img-main img"
                src={"http://127.0.0.1:8000"+this.state.package.thumbnail}
                alt="main" 
                fluid ="True"/>
            </div>
            <div className="col-md-6" id="overview">
                <h4>{this.state.package.code}</h4>
                <h5><small>  {this.state.package.created_at}</small></h5
            </div>
            <div className="row mt-4">
                <h3><small></small></h3>
                <div className="row">
                { 
                this.state.package.image.map(function (person, index) {
                 return (
                    <div className="col" key={index}>
                            <img className={person.image} src="" alt="1"/>
                    </div>
                 )})}
                </div>
            </div>

        </div>
        
        <div className="row">
        <h3 className="my-4">{this.state.package.description}</h3>
        </div>
    </div>
</div>
</div>
</> );
}
}
export default Planview;

像json一样扩展

`{id: 1, image: [{image: "/media/plan_images/Home-5-E-plan-1024x684.jpg"},…], 
 title: "sample",…}`
 

`code: "MAG0001"
 created_at: "2020-11-23"
 description: "college book"
 details: {age: 31, city: "New York", name: "John"}
 id: 1
 image: [{image: "/media/plan_images/Home-5-E-plan-1024x684.jpg"},
 {image: "/media/plan_images/Home-4-E-plan-1024x684.jpg"},
 {image: "/media/plan_images/Home-3-E-plan-1024x684.jpg"},
 ]
 slug: "sample"
 thumbnail: "/media/plan_images/900-square-feet-home-plan.jpg"
 title: "sample"`

---

根据上面的json，我想显示来自field image数组的图像，它包含多个图像以及字段名details中的json数据。您将一个json对象放入数组中，并尝试在render方法中映射它。map函数仅用于数组，即detail。有两种方法可以解决此问题

解决方案1：

fetch(url)
     .then(res=>{
        this.setState({package:[...this.state.package,res.json()]}) 
        //using es6
     })
     .catch(err=>{
        console.log(err)
     })

render(){
    return(<>
    {this.state.package.map(e=>{
        return e.properties // iterate the json attribute
    })}
    </>)
}

fetch（url）
。然后（res=>{
this.setState（{package:[…this.state.package，res.json（）]}）
//使用es6
})
.catch（错误=>{
console.log（错误）
})
render（）{
返回(
{this.state.package.map（e=>{
返回e.properties//迭代json属性
})}
)
}

---

解决方案2：您可以使用foreach循环将json对象转换为数组，详细信息是吗？多亏了Sarun UK，我终于找到了答案

我变了

constructor() {
    super();
    this.state = { package:{ image: []}, };
  }

及

{this.state.package.image&&this.state.package.image.map（函数（个人，索引）{
返回(
)})} 

尝试此操作-

-检查图像路径是否正确，但现在我得到了“TypeError:无法读取未定义的”error的属性“map”。您的状态

包

应该是

对象而不是数组。this.state={package:{image:[]}，}；并进行安全检查
this.state.package.image&&this.state.package.image.map
{ this.state.package.image && this.state.package.image.map(function (person, index) {
                 return (
                    <div className="col" key={index}>
                            <img className="img-fluid" src= 
 {"http://127.0.0.1:8000"+person.image} alt="1"/>
                    </div>
)})}