javascript - 映射状态数组不返回组件(ReactJS)

Question

我正在尝试为 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>

Answer 1

您应该删除两个 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;