[英]Accessing json file in react js
This is my code: 这是我的代码:
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>
);
}
}
I want to access the json element in 我想访问中的json元素
<p className="App-intro">//access the json data here.
I have tried to use react map function without success. 我试图使用反应地图功能没有成功。
Is there any help. 有什么帮助吗? AM new in react js.
React JS中的AM新功能。
You can render the data like this: 您可以像这样渲染数据:
<p className="App-intro">
<span>{this.state.data[0].name}</span>
{this.state.data[0].hobbyList.map(e => <span key={e}>{e}</span>)}
</p>
Did you tried to map over your state
data
object? 您是否尝试过映射
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.