如何在React JS中点击按钮将数据在独立组件之间传递

Question

我正试图通过单击按钮将数据从我的卡组件传递到用户组件。两者都是独立的组件。在卡组件I中，并从API获取数据。现在，当我点击任何用户信息按钮时，我想进入用户页面并显示其数据。我确实尝试过使用react redux。但我在用户页面上找到了所有元素。我只需要一个我点击了配置文件的用户。有没有任何方法可以在有或没有redux的情况下解决这个问题？

Card.js

import React, { useEffect,useState } from 'react'
import axios from 'axios'
import { NavLink } from 'react-router-dom'
import User from './User'
import { useStateValue } from './Stateprovider'
const Card = ({id,name,Image},props) => {
const [posts, setposts] = useState([]) 

useEffect(() => {
axios.get('https://s3-ap-southeast-1.amazonaws.com/he-public-data/users49b8675.json')
.then(res =>{
console.log(res);
setposts(res.data)
})
.catch(err =>{
console.log(err);
})
},[])

const [filter,setfilter] = useState('');
const searchText = (event) =>{
setfilter(event.target.value);
}
let dataSearch = posts.filter(item =>{
return Object.keys(item).some(key =>
item[key].toString().toLowerCase().includes(filter.toString().toLowerCase()))
})

function sendData(){
<User id={id} name={name} />
}
return (
<>
<div className="card-area">
{
dataSearch.map((item) => {
let {id,name,Image}=item
return (
<>
<div key="id" className="card">
<img src={Image} alt="" />
<div className="card-data">
<h3><span>User Id: </span>{id}</h3>
<h2><span>Name: </span>{name}</h2>
</div>
<NavLink className="button" exact to={`/${item.id}`} onClick={()=>sendData()}> User Info </NavLink>
</div>
</>
)} )
}
</div>
</>
)
}
export default Card;

User.js

import React, { useState } from 'react'
import { NavLink } from 'react-router-dom';
import { useEffect } from 'react/cjs/react.development';
import Card from './Card';
import { useStateValue } from './Stateprovider';
const User = (props) => {        
return (
<>
<div key="id" className="card">
<img src={props.Image} alt="" />
<div className="card-data">
<h3><span>User Id: </span>{props.id}</h3>
<h2><span>Name: </span>{props.name}</h2>
</div>
<NavLink className="button" exact to='/home' > User Info </NavLink>
</div>
</>
)
}
export default User;

Answer 1

我假设您有一个显示用户信息的路由，在这种情况下，您可以使用react路由器中的Link组件将用户重定向到具有预定义状态的新页面

<Link
to={{
pathname: "/userinfo",
state: { userinfo: {
id: "some id",
name: "some name"
}}
}}
/>

并且您可以使用CCD_ 2访问userinfo组件中的状态。还可以看看这个线程，我如何通过React_router传递状态？和https://v5.reactrouter.com/web/api/Link

Answer 2

您需要将props传递给组件才能访问它

反应组件和道具