reactjs待办事项列表-未捕获的TypeError：无法读取未定义的属性'map'

Question

I'm following the ReactJS tutorial ( http://redux.js.org/docs/basics/UsageWithReact.html ) for the basic todo list and tweaking it to my liking, but am running into the following error:

Uncaught TypeError: Cannot read property 'map' of undefined

Here is the code:

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;

I'm new to ReactJS and somewhat new to Javascript so I'm hoping I get some feedback as to why I'm seeing this error, and what steps I can take to get past it.

Answer 1

The error Cannot read property 'map' of undefined is saying that you're trying to call map() on something which doesn't exist. The only place you're calling map() is in ConfigList :

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

which suggests that the configs variable hasn't been set when you're trying to call map() . Since ConfigList is a functional React component , configs is expected to be passed in as part of the props object, but it doesn't look like this is being set.

You'll need to check the code where you're calling <ConfigList /> to make sure you are setting configs ; it should look a bit like

<ConfigList configs={ myConfigs } />