javascript - Reactjs 待办事项列表-未捕获类型错误 : Cannot read property 'map' of undefined

Question

我正在按照 ReactJS 教程 ( http://redux.js.org/docs/basics/UsageWithReact.html ) 获取基本待办事项列表，并根据自己的喜好进行调整，但遇到以下错误:

Uncaught TypeError: Cannot read property 'map' of undefined

这是代码:

ConfigList.js -

import React, {Component, PropTypes} from 'react';
import ConfigItem from '../components/ConfigItem';


const ConfigList = ({ configs }) => (
  <ul>
    {configs.map(config =>
      <ConfigItem
        key={config.id}
        />
    )}
  </ul>
);

ConfigList.propTypes = {
  configs: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    text: PropTypes.string.isRequired
  }))
};

export default ConfigList;

ConfigItem.js -

import React, { PropTypes } from 'react';

const ConfigItem = ({ text }) => (
  <li>{text}</li>
);

ConfigItem.propTypes = {
  text: PropTypes.string.isRequired
};

export default ConfigItem;

我是 ReactJS 新手，对 Javascript 也有些陌生，所以我希望能得到一些反馈，了解为什么我会看到此错误，以及我可以采取哪些步骤来克服它。

Answer 1

错误Cannot read property 'map' of undefined表示您正在尝试调用 map()在不存在的东西上。你唯一打电话的地方map()位于ConfigList :

{configs.map(config =>
  <ConfigItem
    key={config.id}
    />
)}

这表明configs当您尝试调用 map() 时，变量尚未设置。自 ConfigList是 functional React component , configs预计将作为 props 的一部分传入对象，但看起来并没有被设置。

您需要检查您调用的代码 <ConfigList />确保您设置 configs ;它应该看起来有点像

<ConfigList configs={ myConfigs } />