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

Question

我有我的代碼如下

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文件，但並沒有真正瞭解它的作用。任何人都可以向我解釋這裏有什麼問題嗎？

編輯：更新的代碼

Answer 1

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