React中点击表格行触发二次API调用的方案咨询

嘿，我来给你分享几个更贴合React设计理念的方案，完全不用依赖data-attribute这种DOM层面的方式，直接用数据驱动的思路解决问题～

核心思路：直接在点击事件中传递ID #

React是数据驱动的框架，既然你已经在组件里持有了首次API返回的common_food_data和branded_food_data数组，那每个数据项的ID本来就可以直接访问，根本不需要从DOM元素上读取。

具体实现步骤 #

1. 在组件中定义点击事件处理函数
   先写一个负责发起二次API调用的函数，它接收ID作为参数：

   import { useState } from 'react';
   
   function YourFoodComponent() {
     const [detailedData, setDetailedData] = useState(null); // 存储二次API返回的详情
   
     // 二次API调用逻辑
     const fetchItemDetails = async (itemId) => {
       try {
         const res = await fetch(`https://your-api-url.com/details/${itemId}`); // 替换成你的二次API地址
         const data = await res.json();
         setDetailedData(data);
         // 这里可以添加后续逻辑，比如显示详情弹窗、更新页面内容等
       } catch (err) {
         console.error('获取详情失败:', err);
       }
     };
   
     // 其他状态和首次API调用逻辑...
   }
   

2. 渲染表格时绑定点击事件并传递ID
   不管是给<tr>还是<td>绑定点击事件，直接在onClick回调里把当前item的ID传进去就行，同时记得给每个列表项设置唯一的key（用item的ID刚好合适）：

   // 渲染common_food_data的示例
   <tbody>
     {common_food_data.map(item => (
       <tr key={item.id} onClick={() => fetchItemDetails(item.id)}>
         <td className="single" style={{ width: "300px" }}> 
           <span>{item.name}</span> 
           <img 
             src={item.thumbnail} 
             alt="thumb" 
             height="25px" 
             width="25px" 
             style={{ float: "right", marginRight: "5px", borderRadius: "1px" }} 
           />
         </td>
       </tr>
     ))}
   </tbody>
   
   // branded_food_data的渲染逻辑完全同理，只需要替换数组名即可
   

为什么这比data-attribute更好？ #

• 符合React设计理念：数据驱动视图，我们直接使用组件内持有的数据，而不是从DOM反向读取，避免了数据与DOM不同步的风险。
• 更简洁可靠：不需要额外操作DOM获取data-*属性，代码更直观，也减少了DOM操作带来的潜在问题（比如元素未渲染完成时读取失败）。
• 类型安全：如果用TypeScript，还能给item的ID做类型校验，进一步提升代码可靠性。

额外小提示 #

如果你的点击区域需要更精准（比如只点击图片或文字时触发），只需要把onClick绑定到对应的元素上就行，传递ID的逻辑完全一样：

<td className="single" style={{ width: "300px" }}> 
  <span onClick={() => fetchItemDetails(item.id)}>{item.name}</span> 
  <img 
    src={item.thumbnail} 
    alt="thumb" 
    height="25px" 
    width="25px" 
    style={{ float: "right", marginRight: "5px", borderRadius: "1px" }} 
    onClick={() => fetchItemDetails(item.id)}
  />
</td>

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