調用數組的數組中的JSX的屬性

我有我的代碼如下調用數組的數組中的JSX的屬性

class Cell extends React.Component{ 
     render(){ 
      return (
       <div className="cell" id={this.props.id}>{this.props.value}</div> 
      ) 
     } 
    } 

    let table=[[1,2,3],[4,5,6],[7,8,9],[3,2,1],[6,5,4],[9,8,7],[1,5,8],[9,6,3],[2,4,7]]; 

    class Row extends React.Component{ 

     render(){ 
      return(
       <div className="row" id={this.props.id}> 
        { 
         _.map([...Array(9)],(x,i)=> 
          <Cell id={this.props.id+""+[i+1]} value={table[this.props.id][i]} key={i}/> 
         ) 
        } 
       </div> 
      ) 
     } 
    } 
    class Box extends React.Component{ 
     render(){ 
     return(
      <div className="box"> 
       {_.map([...Array(9)],(x,i)=> 
        <Row key={i} id={i+1}/> 
       )} 
      </div> 
     ) 
    } 
}

我想從陣列table設置<Cell/>屬性value，我得到Uncaught TypeError: Cannot read property '0' of undefined
我試圖尋找到lodash.js文件，但並沒有真正瞭解它的作用。任何人都可以向我解釋這裏有什麼問題嗎？

編輯：更新的代碼

來源

2016-12-06 Jin DO

你能分享更多的代碼嗎？該組件的完整代碼將有所幫助。 –

@IoannisTziligkakis我已更新我的代碼，您現在可以再次檢查 –

我在您的代碼示例中發現了該問題，並更新了我的答案以正確解決您的問題。 –

看來你被一個遞增總是設置id：<Row key={i} id={i+1} />和您使用id作爲table索引。與此相關的問題是，在最後一次迭代中，您將收到一個不存在的表格元素的表索引。這給你一個undefined對象。

來源

2016-12-06 01:21:03

我有一個名爲'table'的數組，爲什麼它是'undefined'？ –

它是在函數的範圍內定義的嗎？ –

不，它是完全全球性的 –

調用數組的數組中的JSX的屬性

回答

相關問題