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

reactjs ToDo List-未捕获TypeError：无法读取未定义

1 个答案: