[英]Accessing json file in react js
這是我的代碼:
class App extends Component {
constructor() {
super();
this.state = {
data: [
{
name: 'Jal Irani',
imgURL: './man.jpg',
hobbyList: ['Front-end Web Development', 'Back-end Web Development', 'Eating Free Food'],
},
],
};
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to Profiler</h1>
</header>
<p className="App-intro">//access the json data here</p>
</div>
);
}
}
我想訪問中的json元素
<p className="App-intro">//access the json data here.
我試圖使用反應地圖功能沒有成功。
有什么幫助嗎? React JS中的AM新功能。
您可以像這樣渲染數據:
<p className="App-intro">
<span>{this.state.data[0].name}</span>
{this.state.data[0].hobbyList.map(e => <span key={e}>{e}</span>)}
</p>
您是否嘗試過映射state
data
對象?
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to Profiler</h1>
</header>
{this.state.data.map((dataItem, i) =>
<div key={i}>
<span>{dataItem.name}</span>
<img src={dataItem.imgURL}/>
<ul>
{dataItem.hobbyList.map((item, i) => <li key={i}>{item}</li>)}
</ul>
</div>
)}
</div>
);
}
import React from "react";
class App extends React.Component {
constructor() {
super();
this.state = {
data: [
{
name: "Jal Irani",
imgURL: "./man.jpg",
hobbyList: [
"Front-end Web Development",
"Back-end Web Development",
"Eating Free Food"
]
}
]
};
}
render() {
const { name, imgURL, hobbyList } = this.state.data[0];
console.log(name);
console.log(imgURL);
console.log(hobbyList);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to Profiler</h1>
</header>
<p className="App-intro" />
</div>
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.