如何在反应js中映射嵌套的json数据答案

【问题标题】：how to map nested json data in react js如何在反应js中映射嵌套的json数据
【发布时间】：2021-03-08 00:47:59
【问题描述】：

如何在 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",…}`

类似json的扩展

`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 我想显示来自字段图像数组的图像，它包含多个图像以及字段名称详细信息中的 json 数据

【问题讨论】：

试试这个 - <img src={person.image} alt="1"/> - 检查图片路径是否正确
但现在我收到“TypeError: Cannot read property 'map' of undefined”错误
你的状态 package 应该是 object 而不是数组。 this.state = { package:{ image: []}, };
还有安全检查this.state.package.image && this.state.package.image.map

标签： json reactjs django image nested

【解决方案1】：

您将一个json对象放入一个数组中并尝试在render方法中对其进行映射，map函数仅用于数组，here是细节。有两种方法可以解决这个问题

解决方案 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
    })}
    </>)
}

解决方案2：你可以使用foreach循环将json对象转换成数组，here是细节

【讨论】：

【解决方案2】：

万岁终于感谢Sarun UK，我得到了答案

我变了

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

和

{ 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>
)})}

【讨论】：