React中如何识别被点击的数据条目并传递给React Router编辑组件？

开发者阿泽

2026-10-5

问题解决方法

1. 修复循环i值永远为数组长度的问题

你遇到的i值异常是因为用var声明循环变量导致的：var属于函数作用域，没有块级作用域绑定，循环结束后i会被赋值为最终的data.length，所有点击事件引用的都是同一个i变量。
修复方案二选一即可：

方案一：把循环声明改为let i，let支持块级作用域，每次循环都会生成独立的变量绑定，点击时就能拿到当前条目的正确索引：

for (let i = 0; i < data.length; ++i) {
  // 原有逻辑不变
}

方案二（更推荐React写法）：用map遍历代替for循环，天然可以拿到当前项的索引和数据：

const renderData = () => {
  return (
    <tbody>
      {data.map((item, index) => (
        <tr key={index}>
          <td>{index+1}</td>
          <td>{item.first_name}</td>
          <td>{item.last_name}</td>
          <td>{item.email}</td>
          <td>{item.states}</td>
          <td>{item.city}</td>
          <td>{item.pincode}</td>
          <td className="action-btns">
            {/* 后续编辑按钮逻辑写在这里 */}
          </td>
        </tr>
      ))}
    </tbody>
  )
}

2. 正确实现编辑页传参

不要使用原生a标签跳转，会导致页面刷新，应该用React Router提供的跳转能力，有两种常用实现方案：

方案A：通过路由state传参（无需改路由规则）

步骤1：替换编辑按钮为Link组件（React Router v5/v6通用）

// 首先导入Link
import { Link } from 'react-router-dom';

// 编辑按钮写法
<Link 
  to={{
    pathname: '/edit',
    state: {
      // 把当前条目的用户数据放到state里
      user: item 
    }
  }} 
  className="edit-btn"
>
  EDIT
</Link>

步骤2：修正路由配置

如果你用的是React Router v5：

<Route 
  path="/edit" 
  // 用render属性传递路由props到Add组件
  render={(routeProps) => <Add {...routeProps} />} 
/>

在Add组件里直接通过props.location.state.user就能拿到传过来的用户数据，用于表单预填。

如果你用的是React Router v6：

<Route path="/edit" element={<Add />} />

在Add组件里用useLocation钩子拿数据：

import { useLocation } from 'react-router-dom';

function Add() {
  const location = useLocation();
  // 拿到用户数据，可选链防止报错
  const editUser = location.state?.user;
  // 后续用editUser预填表单即可
}

方案B：通过路由参数传ID（刷新页面数据不会丢失，更稳妥）

如果需要支持刷新编辑页仍保留数据，推荐把用户ID放到路由路径上：

步骤1：修改路由配置

v5写法：<Route path="/edit/:userId" component={Add} />
v6写法：<Route path="/edit/:userId" element={<Add />} />

步骤2：编辑按钮跳转时带用户ID

<Link to={`/edit/${item.id}`} className="edit-btn">EDIT</Link>

步骤3：编辑页拿ID后取数据

在Add组件里拿到userId后，可以从全局状态/重新调用接口获取对应用户数据，即可实现预填，刷新页面也不会丢失数据。

内容的提问来源于stack exchange，提问作者Emilia-tan