Question

我正在尝试为JSON数据集中的每个用户呈现一个UserItem组件。页面呈现没有错误，但没有输出UserItem。另外一双眼睛会非常感激。

我应用内/ SRC /资产/数据/ data.json

{
  "data": [
    {
      "name": "Bart",
      "age": 10
    },
    {
      "name": "Lisa",
      "age": 8
    },
    {
      "name": "Maggie",
      "age": 2
    }
  ]
}

我应用内/ SRC /资产/组件/ 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 /资产/组件/ 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，其中您将名称和年龄作为道具传递。所以：

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;

映射状态数组不返回组件（ReactJS）

1 个答案: