从文件导入 arrray 后在 react 组件内映射数组

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>
))

这个 q+a 可能会帮助你理解原因： 反应元素和胖箭头函数