Question

我刚刚开始探索React.js，当我在StudyDayList组件的所有日子里尝试map时，我无法弄清楚为什么会出现错误：

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

2）未捕获错误：元素类型无效：期望一个字符串（for   内置组件）或类/函数（用于复合组件）   但得到了：未定义。您可能忘记从中导出组件   它定义的文件。检查StudyDayList的render方法。

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

它又出现了另一个错误：

未捕获的ReferenceError：未定义日期

我已经days检查了index.js中propTypes的值，而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

我猜您没有导出默认StudyDayRow;

所以，做那样的事情 -

import {StudyDayRow} from './StudyDayRow';

或者可以编辑 -

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

Answer 2

您的代码在this CodeSandbox snippet上正常运行。您的问题可能源于import语法，因为您正在执行export const而不是export default。请注意，您无法执行export default const someVariable，在将变量赋值给某个值后，您需要将其导出。

如果您想保留当前语法，请将导入更改为名为imports的导入，如此

import { StudyDayRow } from './StudyDayRow';

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

React没有在无状态组件

我尝试了什么

StudyDayList组件

StudyDayRow组件

2 个答案: