Question

我有一个反应成分。我也有一个js文件，该文件包含一个导入到组件中的对象数组。我想在数组上使用.map()函数，并在li内显示每条信息，而其中的当前信息位于ul内。我知道活动已正确导入，因为console.log(Activity)正在显示5个项目。当到达map函数时，它决定不进行迭代并显示任何信息。我查看了源代码，它只是显示一个空的无序列表。

import React, { Component } from 'react';

import Activities from '../../../../fakedata/fake_activity';

export default function Activity(props){
    console.log(Activities)
    return(
        <div className="activity-container">
            <ul className="activity-list">
                {
                    Activities.map((activity) => {
                        <li className="activity">
                            <span className="activity-group">{activity.group}</span>
                            <span className="activity-date">{activity.date}</span>
                            <span className="activity-description">{activity.description}</span>
                        </li>
                    })
                }
            </ul>
        </div>
    )
}

这是活动对象被导入

const activity = [
    {
        group: 'Homiez',
        description: '',
        date: '3:22 pm 1/15'
    },
    {
        group: 'Bros',
        description: '',
        date: '1:48 pm 1/15'
    },
    {
        group: 'Bros',
        description: '',
        date: '12:31 pm 1/15'
    },
    {
        group: 'Homiez',
        description: '',
        date: '10:13 am 1/15'
    },
    {
        group: 'Manayek',
        description: '',
        date: '7:17 pm 1/14'
    },
]

module.exports = activity;

Answer 1

你不返回从map函数内部任何东西。您可能需要改变它是这样的：

Activities.map((activity) => {
  return (
    <li className="activity">
      <span className="activity-group">{activity.group}</span>
      <span className="activity-date">{activity.date}</span>
      <span className="activity-description">{activity.description}</span>
    </li>
  );
})

或者这个：

Activities.map((activity) => (
  <li className="activity">
    <span className="activity-group">{activity.group}</span>
    <span className="activity-date">{activity.date}</span>
    <span className="activity-description">{activity.description}</span>
  </li>
))

此问题解答可能有助于您了解原因：React elements and fat arrow functions

从文件导入错误后在React组件内部映射数组

1 个答案: