React中如何通过按钮删除表格行，解决parentNode未定义报错

• 你在按钮点击事件中传给deleteRow的参数是row.idFoto，不是按钮DOM元素，所以函数内的btn实际拿到的是ID数值，不存在parentNode属性，直接触发报错。
• React是数据驱动视图的框架，不推荐直接操作DOM修改节点，手动修改的DOM很容易被React的虚拟DOM更新覆盖，正确的实现方式是通过更新组件状态触发视图自动刷新。

1. 修改App.js #

修改点如下：

• 补全render方法的return语句，否则组件无法正常渲染
• 重写deleteRow方法，改为接收要删除的行ID作为参数，通过过滤state中的fotos数组实现删除逻辑
  修改后的完整代码：

class App extends React.Component{
  constructor(props) {
    super(props);  

    this.state = {
      fotos: [],
      restaurantes:[],
    }
  }

  deleteRow = (deleteId) => {
    // 过滤掉对应id的项，更新state后React会自动重渲染表格
    this.setState({
      fotos: this.state.fotos.filter(item => item.idFoto !== deleteId)
    })
  }

  render(){  
    const { fotos, restaurantes } = this.state;
    // 补return语句
    return (
      <div className="container">
         <Tabela dadosFotos={fotos} restaurante={this.deleteRow} />
      </div>
    )
  }
}

2. Tabela.js无需修改 #

你现有的按钮点击事件传row.idFoto的逻辑已经适配修改后的deleteRow方法，不需要调整。

内容的提问来源于stack exchange，提问作者GuyPeace