如何正确获取按钮ID用于Delete Ajax请求，解决请求偶发失败问题

看起来你的问题核心并不是组件没渲染完成，而是事件对象的target指向不稳定——当点击Button时，event.target不一定总是指向Button元素（比如Button内部有嵌套元素的话，target会变成那个子元素，这时候就拿不到id或者data-contactid了）。咱们一步步解决：

1. 先理清问题根源 #

其实当renderTable渲染表格行的时候，contact.id已经是确定的值了（它来自你state里的contactData），根本不需要等待ID就绪。你之前遇到的偶发失败，完全是因为依赖event.target.id获取ID的方式不可靠。

2. 最稳妥的解决方案：直接传递ID给处理函数 #

避开event.target的不确定性，在渲染Button时直接把contact.id作为参数传给handleSubmit，代码更清晰也更可靠：

首先修改Button的点击事件绑定：

<Button 
  onClick={() => this.handleSubmit(contact.id)} 
  variant="raised" 
  color="secondary"
>
  DELETE
</Button>

然后更新handleSubmit函数，直接使用传入的ID：

handleSubmit = (contactId) => {
  apiClient.delete(`contacts/${contactId}`)
  .then(res => {
    console.log(res);
    console.log(res.data);
    // 别忘了删除成功后更新本地state，把对应的联系人从列表里移除
    this.setState(prevState => ({
      contactData: prevState.contactData.filter(contact => contact.id !== contactId)
    }))
  })
  .catch(err => console.log('删除请求出错: ', err))
}

针对你两个问题的具体解答 #

如何让组件和/或删除函数等待ID值就绪？ #

完全不需要等待！当表格行渲染时，contact.id已经存在于contactData中了，你之前的问题是事件处理方式的问题，和ID是否就绪无关。

是否应该使用state存储ID属性，或改用data-contactid属性替代event.target.id？ #

• 用state单独存ID没必要，反而会增加不必要的状态管理复杂度；
• 用data-contactid的话，你需要用event.currentTarget.dataset.contactid来获取（currentTarget才是绑定事件的元素），但这还是不如直接传递ID参数可靠。

直接传递ID的方式，彻底规避了事件target带来的不确定性，代码逻辑也更直观。

最后提个小优化：你现在用数组索引i作为TableRow的key，建议改成用contact.id作为key，这样React在更新列表时性能更好，也能避免索引变化带来的渲染问题：

<TableRow key={contact.id}>

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