Question

我有一个带有子组件状态数组的组件，该子组件在我的render函数中映射，并且每个子组件都有一个引用数组。它应该是一个编号列表，并且可以选择删除一个项目。删除此项目后，还应同时从两个数组中删除该项目，此后，函数将循环遍历refs数组并激活每个子项的内部函数以更新其在列表中的编号。当此函数遍历引用时，它将引发“ null不是对象”异常，例如其尝试访问已删除的组件的异常。第一次删除是可以的，但第二次则会出现麻烦，无论是异常还是完全删除另一行。

我试图通过剪接，切片和连接，以不同的方式从列表中删除项目，并制作数组的副本，然后将其分配给状态。还尝试以不同的方式使用回调，但似乎无济于事。

  addRow = () => {
      const index = this.state.rows.length
      const nextRow = (
          <Row
               key={index} rowNum={index + 1}
               deleteRow={this.handleDeleteRow} 
               ref={ref => this.state.rowsRefs[index] = ref}
          />
      )
      this.setState({ rows: [...this.state.rows, nextRow]})
  }

  handleDeleteRow = rowNum => { //activated by child
      this.setState({ rowToDelete: rowNum }, () => 
this.props.openConfirmationPopUp())
  }

  deleteRow = () => { // gets activated by father component ref
      this.state.rowsRefs[this.state.rowToDelete].deleteRowAnimation()
      this.state.rowsRefs.splice(this.state.rowToDelete, 1)
      this.state.rows.splice(this.state.rowToDelete, 1)
      setTimeout(() => this.setState({ rowsRefs: this.state.rowsRefs, rows: this.state.rows }), 500)
      this.updateRowsNumbers()
  }

  updateRowsNumbers = () => {
      for(let i = 0; i < this.state.rows.length; i++) {
          this.state.rowsRefs[i].updateRowNum(i + 1)
      }
  }

null不是对象

遍历refs数组将引发null异常

0 个答案: