Question

我写了这个反应组件

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

这是来自这里的反应教程的一个例子

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

示例和我的代码之间的唯一区别是我正在关闭组件样式而不是反应组件的函数样式。

Answer 1

创建行组件（在Board组件内）时，.ui-datatable-emptymessage{ display:none }逻辑有错误：您正在访问不存在的单元数组项。它应该是for loop，因为数组有六个元素，并且0索引不是let i = 5。

let i = 6一些陈述帮助我解决了这个问题。

Answer 2

在下面的代码中，您不会迭代索引为0的数组的第一项，而且@Govind建议i=6必须是i=5，所以这样：< / p>

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

See it in action

为什么我的React组件的道具未定义

2 个答案: