反應渲染兩次打電話，道具未定義關於第二

Question

路由器（導演）調用父組件上渲染，它看起來像這樣：

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


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

Child1看起來是這樣的：

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

在控制檯中，它正在打印ITEMS一次，正確，然後PROP S兩次，第一次正確，第二次未定義。顯然這對我來說是一個錯誤，就好像它沒有定義，forEach就會爆發。我不明白我做錯了什麼，因爲我只是試圖從父母到孩子傳遞一個數組。

Answer 1

你試圖在下拉呈現下拉）

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> 
      ------------- HERE!!!! 
      <Dropdown title={this.props.title}> 
      {items} 
      </Dropdown> 
     </div> 
     } 
    } 

看這個工作的例子。我創建了JSFiddle