React JS中点击按钮如何在两个独立组件间传递指定用户数据

这里提供两种实现思路，均可满足点击Card组件按钮后在User页面仅展示选中用户数据的需求：

方案一：不使用Redux（轻量场景推荐，依赖React Router能力） #

你可以直接通过React Router的路由传参能力传递数据，不需要额外引入全局状态管理：

1. 确认路由配置为动态路由
   在你的路由配置文件（通常是App.js）中，给User页面对应的路由添加动态参数：

   // react-router-dom v6 写法
   import { Routes, Route } from 'react-router-dom'
   import Card from './Card'
   import User from './User'
   
   function App() {
     return (
       <Routes>
         <Route path="/home" element={<Card />} />
         <Route path="/:userId" element={<User />} />
       </Routes>
     )
   }
   

2. 修改Card组件的NavLink传参
   直接将点击的当前用户数据通过路由state传递，删除没用的sendData函数：

   {/* 原来的NavLink改成这个 */}
   <NavLink 
     className="button" 
     to={{
       pathname: `/${item.id}`,
       state: item // 这里传递当前点击的完整用户数据
     }}
   > 
     User Info 
   </NavLink>
   

3. User组件接收路由参数渲染
   在User组件中用useLocation拿到传递的用户数据即可：

   import React from 'react'
   import { NavLink, useLocation } from 'react-router-dom'
   
   const User = () => {        
     const location = useLocation()
     const user = location.state // 这里就是选中的单个用户数据
   
     // *如果担心刷新页面数据丢失，可以配合useParams拿路由id，再重新请求/从全量数据中过滤
     // import { useParams } from 'react-router-dom'
     // const { userId } = useParams()
     // 再调用接口拿id匹配的用户数据即可
   
     return (
       <>
         <div className="card">
           <img src={user.Image} alt={user.name} />
           <div className="card-data">
             <h3><span>User Id: </span>{user.id}</h3>
             <h2><span>Name: </span>{user.name}</h2>
           </div>
           <NavLink className="button" to='/home' > 返回用户列表 </NavLink>
         </div>
       </>
     )
   }
   
   export default User;
   

方案二：使用Redux实现 #

你之前用Redux出错的原因是只存了全量用户列表，没有新增当前选中用户的状态来存储点击的单个用户：

1. 修改Redux状态配置
   在你的全局状态中新增currentUser字段，初始值为null，同时新增修改该字段的action：

   // action示例
   export const setCurrentUser = (user) => ({
     type: 'SET_CURRENT_USER',
     payload: user
   })
   
   // reducer示例
   const initialState = {
     userList: [],
     currentUser: null
   }
   function userReducer(state = initialState, action) {
     switch(action.type) {
       case 'SET_CURRENT_USER':
         return {...state, currentUser: action.payload}
       default:
         return state
     }
   }
   

2. Card组件点击时更新全局状态
   点击User Info按钮时，把当前用户dispatch到全局状态：

   import { useDispatch } from 'react-redux'
   import { setCurrentUser } from '你的action文件路径'
   
   const Card = () => {
     const dispatch = useDispatch()
     // 其他原有逻辑不变
     return (
       // 其他代码不变
       <NavLink 
         className="button" 
         to={`/${item.id}`}
         onClick={() => dispatch(setCurrentUser(item))}
       > 
         User Info 
       </NavLink>
     )
   }
   

3. User组件读取全局状态的单个用户

   import { useSelector } from 'react-redux'
   
   const User = () => {
     const currentUser = useSelector(state => state.currentUser)
     // 直接用currentUser渲染即可，刷新丢失的处理逻辑和方案一一致
   }
   

现有代码需要修正的问题 #

• Card组件定义时的参数({id,name,Image},props)没用，这三个属性是你map循环中从item解构的，不是父组件传的，直接改成const Card = () =>即可
• map循环时的key写错了，你写的是key="id"（固定字符串），会触发重复key警告，改成key={id}即可
• 你写的sendData函数没有任何作用，路由跳转的两个独立组件不能通过这种方式传参，直接删除即可

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