我正在用react.js开发一个项目。
我有一个json数组,其中包含玩家列表及其详细信息。我在app.js组件中使用json数组。但不是整个数组。我只想使用数组中的单个对象。这是我正在使用的json文件:
`{
"user":[
{"name":"Mahendra Singh","city":"Ranchi","age":"35","url":"http://maggiesadler.com/wp-content/uploads/2015/10/11189261_759116200870985_1595157767_n.jpg"},
{"name":"Virat Kohli","city":"Delhi","age":"28","url":"http://maggiesadler.com/wp-content/uploads/2015/10/10004088_1491055334449687_1187165020_n.jpg"},
{"name":"Suresh Raina","city":"Punjab","age":"26","url":"http://maggiesadler.com/wp-content/uploads/2015/10/10817863_856543214397968_517239188_n.jpg"},
{"name":"Chahel","city":"Noida","age":"25","url":"http://maggiesadler.com/wp-content/uploads/2015/10/10919749_326992714172441_299394464_n.jpg"},
{"name":"Krishna Kumar","city":"Noida","age":"24","url":"http://maggiesadler.com/wp-content/uploads/2015/10/10617007_939025979457209_6938406_n.jpg"},
{"name":"Gautam Gambhir","city":"Mumbai","age":"26","url":"http://maggiesadler.com/wp-content/uploads/2015/10/1168617_1435408473368301_409182770_n.jpg"},
{"name":"Sachin Tendulkar","city":"Mumbai","age":"48","url":"http://maggiesadler.com/wp-content/uploads/2015/10/11189836_754178218029431_2102772742_n.jpg"},
{"name":"Sauravh Ganguly","city":"Bengal","age":"50","url":"http://maggiesadler.com/wp-content/uploads/2015/10/10843869_1658219887738208_2033326788_n.jpg"}
]
}`
这是我要在其中使用该数据的app.js
import React, { Component } from 'react';
import './App.css';
var userjson = require('./user.json');
class App extends Component {
constructor(){
super();
this.state = { user:[],
}
}
componentDidMount(){
this.setState({ user : userjson.user})
}
render() {
console.log(name);
var user = this.state.user; //user is a list of user from the state
var currentUser = user[0];
console.log(currentUser);
console.log(currentUser['name']); //error
console.log(currentUser['age']); //error
console.log(currentUser['city']);// error
var player = {'name':'Sachin','Age':'48','City':'Mumbai'};
console.log(player);
console.log(player['name']); //while this will work
console.log(player['City']);
console.log(player['Age']);
for(var index = 0 ;index < user.length ;index++){
if(index > 0){ break; }
var name = user[index].name;
var city = user[index].city;
var age = user[index].age;
var url = user[index].url;
}
return (
<div className="main-container">
<div className="user">
<div className="user-pic">
<img src = {url} alt="image not found"/>
</div>
<div className="user-box">
<div className="user-name">
{name}
</div>
<div className="user-city">
{age}
</div>
<div className="user-age">
{city}
</div>
</div>
</div>
</div>
);
}
}
export default App;
Var播放器类似于currentUser,并使用其属性名称提供值,但是currentUser不使用其属性名称提供值吗?
答案 0 :(得分:0)
ComponentDidMount在首次渲染Component之后运行。您需要在构造函数中移动集数据或在渲染中有条件地检查它。您也可以使用componentWillMount
var userjson = require('./user.json');
class App extends Component {
constructor(){
super();
this.state = { user: userjson.user,
}
}
componentDidMount(){
}