React中如何配置表格行按钮的onClick事件获取当前行数据

你现有的点击事件绑定逻辑已经实现了精准获取当前行数据的核心：map遍历过程中每一行的contacts变量就是当前行的完整数据，通过箭头函数闭包捕获后传入selectCustomer，拿到的就是对应行的内容，不需要额外修改绑定逻辑。

你只需要修改selectCustomer函数，把拿到的数据存入全局Context即可，修改后的代码如下：

const selectCustomer = (rowValue) => {
    console.log("Row Data", rowValue)
    // 将当前行数据写入全局Context
    setCustomerInformation(rowValue);
    // 如有需要可以在此处添加页面跳转逻辑，跳转到其他使用该数据的页面
}

额外优化建议 #

• 确保你的GlobalContext.Provider已经包裹了所有需要访问customerInformation的页面组件，否则其他页面无法读取到存储的全局数据
• 你当前表格代码里直接渲染contacts.listOfContact_Phones、contacts.listOfContact_AlternatePhone这类数组类型字段会触发React渲染警告，建议先取数组内的指定字段再渲染，示例写法：

  <td>{contacts.listOfContact_Phones?.[0]?.phoneNumber ?? '-'}</td>
  

  可选链和空值合并运算符可以避免接口返回空数组时页面报错。
• 如果需要刷新页面后全局数据不丢失，可以搭配localStorage做持久化存储：Context初始化时从localStorage读取初始值，更新数据时同时写入localStorage。

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