Javascript 反应渲染调用两次，第二次未定义道具

路由器（控制器）调用父组件上的渲染，如下所示：

export class Parent extends React.Component {
  constructor(props) {
    super(props);
  } 


  render () {
    return <div className="content-section">
      <div className="content-header">Parent</div>
      <Child1 />
    </div>
  }
}

export class Child1 extends React.Component {
  constructor(props) {
    super(props);
  } 
  render() {
    let items = ['One', 'Two', 'Three'];
    console.log('ITEMS', items);
    return <div className="content-section">
      <Dropdown title="Test Title" items={items} />
    </div>;
  }
}

    class Dropdown extends React.Component {

      constructor(props) {
        super(props);
      } 
      render() {
         console.log('props', this.props.items);
         let items = [];
         this.props.items.forEach(item => items.push(<MenuItem key={item.id}>{item}</MenuItem>));
         return <div>
           <Dropdown title={this.props.title}>
           {items}
           </Dropdown>
         </div>
      }
   }

导出类父类扩展React.Component{
建造师（道具）{
超级（道具）；
} 
渲染（）{
回来
父母亲
}
}

Child1看起来像这样：

export class Parent extends React.Component {
  constructor(props) {
    super(props);
  } 


  render () {
    return <div className="content-section">
      <div className="content-header">Parent</div>
      <Child1 />
    </div>
  }
}

export class Child1 extends React.Component {
  constructor(props) {
    super(props);
  } 
  render() {
    let items = ['One', 'Two', 'Three'];
    console.log('ITEMS', items);
    return <div className="content-section">
      <Dropdown title="Test Title" items={items} />
    </div>;
  }
}

    class Dropdown extends React.Component {

      constructor(props) {
        super(props);
      } 
      render() {
         console.log('props', this.props.items);
         let items = [];
         this.props.items.forEach(item => items.push(<MenuItem key={item.id}>{item}</MenuItem>));
         return <div>
           <Dropdown title={this.props.title}>
           {items}
           </Dropdown>
         </div>
      }
   }

导出类Child1扩展了React.Component{
建造师（道具）{
超级（道具）；
} 
render（）{
让项目=[‘一’、‘二’、‘三’]；
console.log（'ITEMS'，ITEMS）；
回来
;
}
}

然后下拉组件如下所示：

export class Parent extends React.Component {
  constructor(props) {
    super(props);
  } 


  render () {
    return <div className="content-section">
      <div className="content-header">Parent</div>
      <Child1 />
    </div>
  }
}

export class Child1 extends React.Component {
  constructor(props) {
    super(props);
  } 
  render() {
    let items = ['One', 'Two', 'Three'];
    console.log('ITEMS', items);
    return <div className="content-section">
      <Dropdown title="Test Title" items={items} />
    </div>;
  }
}

    class Dropdown extends React.Component {

      constructor(props) {
        super(props);
      } 
      render() {
         console.log('props', this.props.items);
         let items = [];
         this.props.items.forEach(item => items.push(<MenuItem key={item.id}>{item}</MenuItem>));
         return <div>
           <Dropdown title={this.props.title}>
           {items}
           </Dropdown>
         </div>
      }
   }

类下拉列表扩展了React.Component{
建造师（道具）{
超级（道具）；
} 
render（）{
console.log（'props'，this.props.items）；
设项目=[]；
this.props.items.forEach（item=>items.push（{item}））；
回来
{items}
}
}

---

在控制台中，它将正确打印项目一次，然后打印道具两次，第一次打印正确，第二次打印未定义。显然，这对我来说是一个错误，好像它是未定义的forEach爆炸了。我不明白我做错了什么，因为我只是试图将数组从父对象传递给子对象。

您正在尝试在下拉列表中渲染下拉列表）

类下拉列表扩展了React.Component{
建造师（道具）{
超级（道具）；
} 
render（）{
console.log（'props'，this.props.items）；
设项目=[]；
this.props.items.forEach（item=>items.push（{item}））；
回来
-------------这里！！！！
{items}
}
}

---

看看这个工作示例。我已经创建了

您正在尝试在下拉列表中渲染下拉列表）

类下拉列表扩展了React.Component{
建造师（道具）{
超级（道具）；
} 
render（）{
console.log（'props'，this.props.items）；
设项目=[]；
this.props.items.forEach（item=>items.push（{item}））；
回来
-------------这里！！！！
{items}
}
}

看看这个工作示例。我已经创建了

在下拉列表中定义propTypes（

项：React.propTypes.array.isRequired

。我的第一个猜测是您在别处引用了

，而没有将它传递给

项

。在下拉列表中定义propTypes（

items:React.PropTypes.array.isRequired

。我的第一个猜测是您在别处引用了

，而没有传递它

items

）。