为什么我的React组件的props未定义

Question

我写了这个React组件

class Row extends React.Component {
   constructor(props) {
      super(props);
      this.style = {
         display: "flex"
      }
   }
   render(){
      var rowcells = [];
      for(let i = 0; i < 7; i ++) {
         console.log("foo " + this.props.cells)                           
         rowcells.push(<Cell key={i} col ={i} row={this.props.row} cell={this.props.cells[i]} handleClick={this.props.handleClick}/>)
      }
      return (
         <div style = {this.style}>
            {rowcells}
         </div>
      )
   }
}

该组件在我的应用程序中仅被调用一次，例如

for(let i = 6; i > 0; i--) {
  rows.push(<Row key={i} row={i} cells={this.props.cells[i]} handleClick={this.props.handleClick}/>)
}

因此，您可以看到props.cells已定义。 但是，当我的代码运行时，它在this.props.cells[I]行中失败，并说未定义

https://codepen.io/knows_not_much/pen/dddNRZ?editors=1111

这是来自React教程的示例

https://courses.edx.org/courses/course-v1:Microsoft+DEV281x+1T2018/courseware/404dd3a7096e46c5b4672e26e5a5b404/70c54b9d11ef4439a2996f9826ba6375/?child=last

该示例与我的代码之间的唯一区别是，我将关闭组件样式而不是React组件的函数样式。

Answer 1

创建“行”组件（在“董事会组件”内部）时，您的for loop逻辑有错误：您正在访问单元格数组中不存在的项。 应该let i = 5因为数组有六个元素并且索引为0而不let i = 6 。

几个console.log语句帮助我解决了这个问题。

Answer 2

在下面的代码中，您没有迭代数组的第一项（索引为0），并且正如@Govind建议， i=6必须为i=5 ，因此：

for(let i = 6; i > 0; i--) {
  rows.push(<Row key={i} row={i} cells={this.props.cells[i]} handleClick={this.props.handleClick}/>)
}

必须是这样的：

for(let i = 5; i >= 0; i--) { //notice the greater or equal sign (>=)
  rows.push(<Row key={i} row={i} cells={this.props.cells[i]} handleClick={this.props.handleClick}/>)
}

实际观看