Question

我有一个我正在编写的组件，我希望在其中显示由某些动态内容填充的material-ui Drop Down Menu（作为道具传递到组件中）。以下是组件的代码：

import React from 'react';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import CircularProgress from 'material-ui/CircularProgress';

const style = {
  box: {
    display: 'flex',
    alignItems: 'center',
    paddingTop: 8
  },
  currentTermText: {
    fontWeight: 'bold',
    fontSize: 18,
    marginRight: '10px'
  }
};

const TermSelect = ({ terms, currentTerm, changeTerm }) => (
  <div style={style.box} >
    <div style={style.currentTermText}>Term:</div>
    {terms && currentTerm ?
      <DropDownMenu value={currentTerm} onChange={(event, index, payload) => changeTerm(payload)}>
        {terms.map((term) => {
          console.log(term.id);
          return (
            <MenuItem key={term.id} value={term.id} primaryText={term.term} />
          );
        })};
      </DropDownMenu>
      :
      <CircularProgress />
    }
  </div>
);

TermSelect.propTypes = {
  terms: React.PropTypes.arrayOf(React.PropTypes.object),
  currentTerm: React.PropTypes.string,
  changeTerm: React.PropTypes.func
};

export default TermSelect;

但是，我收到此错误：

Uncaught (in promise) TypeError: Cannot read property 'value' of undefined
    at DropDownMenu.js:265
    at forEachSingleChild (ReactChildren.js:52)
    at traverseAllChildrenImpl (traverseAllChildren.js:69)
    at traverseAllChildrenImpl (traverseAllChildren.js:85)
    at traverseAllChildren (traverseAllChildren.js:164)
    at Object.forEachChildren [as forEach] (ReactChildren.js:72)
    at DropDownMenu.render (DropDownMenu.js:264)
    at ReactCompositeComponent.js:793
    at measureLifeCyclePerf (ReactCompositeComponent.js:74)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:792)

以下是DropDownMeu.js的代码行：265：

    if (child && value === child.props.value) {

这表明我的MenuItem组件的道具被解释为undefined。但是，控制台输出，正好在此错误之上，显示了这一点：

TermSelect.jsx:25 4640
TermSelect.jsx:25 4630
TermSelect.jsx:25 4620
TermSelect.jsx:25 4610
TermSelect.jsx:25 4600
TermSelect.jsx:25 4590
TermSelect.jsx:25 4580
TermSelect.jsx:25 4650

这些4 ** 0数字（实际上是字符串）是console.log的预期值，并显示term.id确实没有未定义，因为错误似乎表明了这一点。为什么会抛出这个错误？

我尝试使用Menu替换下拉菜单，但发生了同样的错误，但完全删除了下拉菜单，只显示了自己的映射菜单项。

谢谢！

TypeError由于未定义＆＃39;使用console.log显示具有值的prop的值差异

0 个答案: