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

我想从数组value设置<Cell/>的属性table，我得到Uncaught TypeError: Cannot read property '0' of undefined
我试着查看lodash.js文件，但没有真正了解它的作用。任何人都可以向我解释这里有什么问题吗？

编辑：更新后的代码

Answer 1

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

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

1 个答案: