React中点击用户卡片无法将数据传递到另一页面实现编辑删除如何解决

问题排查与修复步骤 #

• 修正showUser方法的this指向
  你当前的showUser方法作为普通函数，在map中调用时this指向会丢失，可能导致跳转异常，把方法改为箭头函数即可：

showUser = (post) => {
  // 原有逻辑不变
}

• 修正Link传参格式
  你当前Link的state参数被包裹在不必要的数组中，调整为直接传递对象即可，方便后续取值：

<Link
  to={{ pathname: "/UserDetail", state: { userId: post.userId } }}
>

• 补充列表key属性
  你在使用map渲染卡片时没有加唯一key，会触发React警告，调整render方法中的map调用，给每个列表项加key，同时把卡片上的class属性替换为React标准的className，避免属性不生效的问题：

<div> {post.map(post => <React.Fragment key={post.userId}>{this.showUser(post)}</React.Fragment>)}</div>

• 确认路由配置
  确保你项目的根路由配置中已经注册了/UserDetail对应的页面组件：
  如果是react-router-dom v5版本：

<Route path="/UserDetail" component={UserDetail} />

如果是v6版本：

<Route path="/UserDetail" element={<UserDetail />} />

• UserDetail页面接收参数
  v5版本类组件可以直接取值：

// UserDetail类组件中
componentDidMount() {
  const userId = this.props.location.state?.userId
  // 拿到userId后调用接口获取用户详情即可
}

v6版本建议把UserDetail改为函数组件，用useLocation取值：

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

function UserDetail() {
  const location = useLocation()
  const userId = location.state?.userId
  // 后续逻辑
}

补充可选优化：如果需要避免用户刷新页面后state丢失，可以选择把userId放在路由路径中，Link的to改为/UserDetail/${post.userId}，路由配置为/UserDetail/:userId，取值用useParams hook即可，刷新页面参数不会丢失。

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