在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

您似乎总是通过递增 1 来设置 id：<Row key={i} id={i+1} /> 并使用 id 作为 table 的索引。这样做的问题是，在最后一次迭代中，您将收到一个不存在的 table 元素的 table 索引。这是给你一个 undefined 对象。

在jsx的属性中调用数组数组

calling array of arrays in jsx's attribute

jsx

lodash