React 没有在无状态组件中使用 map() 渲染对象数组

Question

我刚刚开始探索 React.js，但我无法弄清楚为什么我整天都在 StudyDayList 组件中尝试map 时出现错误：

1) 警告：React.createElement：类型无效 -- 期望一个字符串（对于内置组件）或一个类/函数（对于 复合组件）但得到：未定义。您可能忘记导出 你的组件来自它定义的文件。检查渲染方法 的StudyDayList。 在 StudyDayList 中

2) 未捕获错误：元素类型无效：应为字符串（对于 内置组件）或类/函数（用于复合组件） 但得到：未定义。您可能忘记从 定义它的文件。检查StudyDayList的渲染方法。

// index.js

import React from 'react';
import {render} from 'react-dom';
import {StudyDayList} from '../src/components/StudyDayList';

window.React = React;

render(
<StudyDayList days={
    [
        {
            study: "React Essentials",
            date: new Date("4/7/2017"),                
            practice: true
        },
        {
            study: "Web Security",
            date: new Date("3/7/2017"),                
            practice: false
        }
    ]
} />, 
document.getElementById('react-container')
);

我尝试过的

代码的这个特定部分不起作用。如果我在 StudyDayList.js 中删除这部分代码，所有显示都很好：

{days.map((day, i) => 
      <StudyDayRow key={i}                            
               study={day.study}
               date={day.date}
               practice={day.practice} />
)}  

另外，我尝试更改语法：

{days.map(day, i => (
      <StudyDayRow key={i}                    
               study={day.study}
               date={day.date}                                
               practice={day.practice} />
))}   

它给出了另一个错误：

Uncaught ReferenceError: day is not defined

我通过propTypes检查了index.js中days的值，days: PropTypes.array是true，长度不为空。

StudyDayList 组件

// StudyDayList.js

import Terrain from 'react-icons/lib/md/terrain';        
import StudyDayRow from './StudyDayRow';

export const StudyDayList = ({days}) => (
<table>
    <thead>
        <tr>
            <th>Date</th>
            <th>Study</th>                
            <th>Practice</th>
        </tr>
    </thead>
    <tbody>  

        // The part of code which I was removing 

        {days.map((day, i) => 
            <StudyDayRow key={i}                            
                        study={day.study}
                        date={day.date}
                        practice={day.practice} />
        )}    

    </tbody>        
</table>
)

StudyDayRow 组件

我不确定 StudyDayRow 组件是否会导致错误。我认为它不能，但我已经附上了它以防万一。

// StudyDayRow.js

import Terrain from 'react-icons/lib/md/terrain';

export const StudyDayRow = ({study, date, practice}) => (
<tr>
    <td>
        {date.getMonth()+1}/{date.getDate()}/{date.getFullYear()}
    </td>
    <td>
        {study}
    </td>
    <td>
        {(practice) ? <Terrain /> : null}
    </td>
</tr>
)

Answer 1

您的代码在this CodeSandbox snippet 上运行良好。您的问题很可能是由您的import 语法引起的，因为您使用的是export const 而不是export default。请注意，您不能执行export default const someVariable，您需要在为变量赋值后将其导出。

如果您想保留当前语法，请将导入更改为命名导入，如下所示

import { StudyDayRow } from './StudyDayRow';

另外，days.map(day, i => ... 不起作用但 days.map((day, i) => ... 起作用的原因是，只要箭头函数接受多个参数，就需要括号。

Answer 2

我猜你没有导出默认的StudyDayRow；

所以，做这样的事-

import {StudyDayRow} from './StudyDayRow';

或者可以编辑-

export default const StudyDayRow = ({study, date, practice}) => (
....
)