如何在React中以键值对的形式显示嵌套的json数据

Question

这是产品描述组件，它有两个选项卡描述和详细信息。当我们点击描述标签时，产品规范将以表格形式显示。我们使用Axios库从API获取JSON数据。我想访问表中"key:value"格式的描述对象。任何人都可以帮我解决这类问题。

顶部选项卡的详细信息。jsx:

import React, { Component } from "react";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.scss";
import { Link } from "react-router-dom";
class DetailsTopTabs extends Component {
render() {
console.log(this.props.item.description);
const { item } = this.props;
return (
<section className="tab-product m-0">
<div className="row">
<div className="col-sm-12 col-lg-12">
<Tabs className="tab-content nav-material">
<TabList className="nav nav-tabs nav-material">
<Tab className="nav-item">
<span className="nav-link active">
<i className="icofont icofont-ui-home"></i>Description
</span>
<div className="material-border"></div>
</Tab>
<Tab className="nav-item">
<span className="nav-link">
<i className="icofont icofont-man-in-glasses"></i>Details
</span>
<div className="material-border"></div>
</Tab>
{/* <Tab className="nav-item">
<span className="nav-link">
<i className="icofont icofont-contacts"></i>Video
</span>
<div className="material-border"></div>
</Tab>
<Tab className="nav-item">
<span className="nav-link">
<i className="icofont icofont-contacts"></i>Write Review
</span>
<div className="material-border"></div>
</Tab> */}
</TabList>
<TabPanel className="tab-pane fade mt-4 show active">
<table className="table table-striped mb-0">
<tbody>
{item.description.map((item) => (
<tr>
<th>{item.name} </th>
<td>{item.value}</td>
</tr>
))}
</tbody>
</table>
</TabPanel>
<TabPanel>
<p className="mt-4 p-0">{item.shortDetails}</p>
</TabPanel>
{/* <TabPanel>
<div className="mt-4 text-center">
<div className="embed-responsive embed-responsive-16by9">
<iframe
src="https://www.youtube.com/embed/BUWzX78Ye_8"
allow="autoplay; encrypted-media"
allowFullScreen
></iframe>
</div>
</div>
</TabPanel>
<TabPanel>
<form className="theme-form mt-4">
<div className="form-row">
<div className="col-md-12 ">
<div className="media m-0">
<label>Rating</label>
<div className="media-body ml-3">
<div className="rating three-star">
<i className="fa fa-star"></i>
<i className="fa fa-star"></i>
<i className="fa fa-star"></i>
<i className="fa fa-star"></i>
<i className="fa fa-star"></i>
</div>
</div>
</div>
</div>
<div className="col-md-6">
<label htmlFor="name">Name</label>
<input
type="text"
className="form-control"
id="name"
placeholder="Enter Your name"
required
/>
</div>
<div className="col-md-6">
<label htmlFor="email">Email</label>
<input
type="text"
className="form-control"
id="email"
placeholder="Email"
required
/>
</div>
<div className="col-md-12">
<label htmlFor="review">Review Title</label>
<input
type="text"
className="form-control"
id="review"
placeholder="Enter your Review Subjects"
required
/>
</div>
<div className="col-md-12">
<label htmlFor="review">Review Title</label>
<textarea
className="form-control"
placeholder="Wrire Your Testimonial Here"
id="exampleFormControlTextarea1"
rows="6"
></textarea>
</div>
<div className="col-md-12">
<button className="btn btn-solid" type="submit">
Submit YOur Review
</button>
</div>
</div>
</form>
</TabPanel> */}
</Tabs>
</div>
</div>
</section>
);
}
}
export default DetailsTopTabs;

示例JSON数据：

{
"product": [
{
"id": 1,
"name": "Flare Dress",
"price": 120,
"salePrice": 200,
"discount": 50,
"pictures": [
"/assets/images/fashion/product/1.jpg",
"/assets/images/fashion/product/21.jpg",
"/assets/images/fashion/product/36.jpg",
"/assets/images/fashion/product/12.jpg"
],
"shortDetails": "Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem,",
"description": {
"Ram": "4gb",
"size": "large"
},
"stock": 16,
"new": true,
"sale": true,
"category": "women",
"colors": ["yellow", "gray", "green"],
"size": ["M", "L", "XL"],
"tags": ["nike", "caprese"],
"rating": 4,
"variants": [
{
"color": "yellow",
"images": "/assets/images/fashion/product/1.jpg"
},
{
"color": "gray",
"images": "/assets/images/fashion/product/21.jpg"
},
{
"color": "green",
"images": "/assets/images/fashion/product/36.jpg"
}
]
}
]
}

Answer 1

试试下面的方法：

import React, { Component } from "react";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.scss";
import { Link } from "react-router-dom";
class DetailsTopTabs extends Component {
render() {
console.log(this.props.item.description);
const { item } = this.props;
return (
<section className="tab-product m-0">
<div className="row">
<div className="col-sm-12 col-lg-12">
<Tabs className="tab-content nav-material">
<TabList className="nav nav-tabs nav-material">
<Tab className="nav-item">
<span className="nav-link active">
<i className="icofont icofont-ui-home"></i>Description
</span>
<div className="material-border"></div>
</Tab>
<Tab className="nav-item">
<span className="nav-link">
<i className="icofont icofont-man-in-glasses"></i>Details
</span>
<div className="material-border"></div>
</Tab>
{/* <Tab className="nav-item">
<span className="nav-link">
<i className="icofont icofont-contacts"></i>Video
</span>
<div className="material-border"></div>
</Tab>
<Tab className="nav-item">
<span className="nav-link">
<i className="icofont icofont-contacts"></i>Write Review
</span>
<div className="material-border"></div>
</Tab> */}
</TabList>
<TabPanel className="tab-pane fade mt-4 show active">

<table className="table table-striped mb-0">
<tbody>
-------------------------------------------------------------
{Object.entries(item.description).map((item) => (
<tr>
<th>{item[0]}</th>
<td>{item[1]}</td>
</tr>
))}
---------------------------------------------------------------    
</tbody>
</table>
</TabPanel>
<TabPanel>
<p className="mt-4 p-0">{item.shortDetails}</p>
</TabPanel>
{/* <TabPanel>
<div className="mt-4 text-center">
<div className="embed-responsive embed-responsive-16by9">
<iframe
src="https://www.youtube.com/embed/BUWzX78Ye_8"
allow="autoplay; encrypted-media"
allowFullScreen
></iframe>
</div>
</div>
</TabPanel>
<TabPanel>
<form className="theme-form mt-4">
<div className="form-row">
<div className="col-md-12 ">
<div className="media m-0">
<label>Rating</label>
<div className="media-body ml-3">
<div className="rating three-star">
<i className="fa fa-star"></i>
<i className="fa fa-star"></i>
<i className="fa fa-star"></i>
<i className="fa fa-star"></i>
<i className="fa fa-star"></i>
</div>
</div>
</div>
</div>
<div className="col-md-6">
<label htmlFor="name">Name</label>
<input
type="text"
className="form-control"
id="name"
placeholder="Enter Your name"
required
/>
</div>
<div className="col-md-6">
<label htmlFor="email">Email</label>
<input
type="text"
className="form-control"
id="email"
placeholder="Email"
required
/>
</div>
<div className="col-md-12">
<label htmlFor="review">Review Title</label>
<input
type="text"
className="form-control"
id="review"
placeholder="Enter your Review Subjects"
required
/>
</div>
<div className="col-md-12">
<label htmlFor="review">Review Title</label>
<textarea
className="form-control"
placeholder="Wrire Your Testimonial Here"
id="exampleFormControlTextarea1"
rows="6"
></textarea>
</div>
<div className="col-md-12">
<button className="btn btn-solid" type="submit">
Submit YOur Review
</button>
</div>
</div>
</form>
</TabPanel> */}
</Tabs>
</div>
</div>
</section>
);
}
}
export default DetailsTopTabs;