我正在尝试为 JSON 数据集中的每个用户呈现一个 UserItem 组件。页面呈现没有错误,但没有输出 UserItem。另一双眼睛将不胜感激。
我的应用程序/src/assets/data/data.json
{
"data": [
{
"name": "Bart",
"age": 10
},
{
"name": "Lisa",
"age": 8
},
{
"name": "Maggie",
"age": 2
}
]
}
我的应用程序/src/assets/components/UserList.js
import React from 'react';
import { UserItem } from './UserItem';
import importedData from '../data/data.json';
export class UserList extends React.Component {
constructor(props){
super(props);
this.state={
users: []
};
}
componentWillMount() {
this.setState({users: importedData.data});
this.setState(this.state);
}
render () {
return (
<div className="user-list">
<ul>
{
this.state.users.map((user) => {
return <UserItem name={user.name} age={user.age} />
)}
}
</ul>
</div>
);
}
}
export default UserList;
我的应用程序/src/assets/components/UserItem.js
import React from 'react';
export class UserItem extends React.Component {
render () {
return (
<li className="user-item">
<div className="name">{this.props.user.name}</div>
<div className="age">{this.props.user.age}</div>
</li>
);
}
}
export default UserItem;
呈现的 HTML
<div class="user-list">
<ul></ul>
</div>
最佳答案
您应该删除两个 js 文件中类之前的关键字 export
,因为您在最后一行导出了它们。 this.setState(this.state);
也毫无用处。在 UserItem.js 中,您编写 this.props.user.name/age 并将名称和年龄作为 Prop 传递。所以:
import React from 'react';
class UserItem extends React.Component {
render () {
return (
<li className="user-item">
<div className="name">{this.props.name}</div>
<div className="age">{this.props.age}</div>
</li>
);
}
}
export default UserItem;
关于javascript - 映射状态数组不返回组件(ReactJS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49100467/