如何解决在反应中将数据从一个页面传递到另一个页面
我在一页上有一个表单,其中包含一个图像、名称和描述以及一个“书籍”按钮。我想将所有这些值传递到另一个页面。
这是显示数据的页面。我有很多包含不同数据的表单。
function TherapistEntry(props) {
const [therapistDetails,setTherapistDetails] = useState({
name: ""
})
function storeName(event) {
setTherapistDetails({
name: event.target.value
})
}
function redirectPage() {
// PassName(therapistDetails.name)
props.history.push('/publicTherapistProfile')
}
return (
<div className="album py-5 bg-light">
<div className="container">
<div className="row">
{therapists.map(properties => {
return (
<div className="col-lg-3 col-md-4 col-sm-6">
<div className="card mb-4 shadow-sm">
<ProfileImage image={properties.image} name="image" />
<div className="card-body">
<p className="card-text" onChange={storeName} name="name">Name: {properties.name}</p>
<p className="card-text" description="description">Description: {properties.description.substring(1,100)}
</p>
<div className="d-flex justify-content-between align-items-center">
<div className=" btn-group">
<button onClick={redirectPage} type="button" className="viewButtonHover btn btn-md btn-outline-secondary">View</button>
</div>
<small className="text-muted">5 Stars</small>
</div>
</div>
</div>
</div>
)
})}
</div>
</div>
</div>
)
}
export default withRouter(TherapistEntry)
我首先尝试通过存储到状态来使用名称值进行测试。 onChange 似乎是存储它的唯一方法。
然后我想将这些存储的值传递给这个页面。
function IndividualTherapistPage(props) {
const [passedTherapist,setPassedTherapist] = useState({
name: ""
})
return (
<div>
<Header />
<div>
<div className="row">
<div className="alignTherapist col-lg-8 col-md-8 col-sm-8">
<div className="container">
<h2>Individual Therapist Section</h2>
</div>
</div>
<div className="team-boxed col-lg-8 col-md-8 col-sm-8">
<div className="container">
<div class="intro">
<h2 class="text-center">Therapist </h2>
<p class="text-center">Nunc luctus in metus eget fringilla. Aliquam sed justo ligula. Vestibulum nibh erat,pellentesque ut laoreet vitae.</p>
</div>
<TherapistOfInterestToPurchase name={passedTherapist.name}/>
</div>
</div>
<div className="col-lg-4 col-md-4 col-sm-4">
<h2 style={{ flex: 1,justifyContent: "center",alignItems: "center" }}>Book</h2>
</div>
</div>
</div>
{/* <Footer /> */}
</div>
)
}
export default IndividualTherapistPage;
有人知道我该怎么做吗?
解决方法
我认为最简单的方法是使用 localStorage
或 HTTP GET 参数。
另一种(更高级)的方法是使用 react-router 和某种全局状态管理。
,在 react 中,您通过 props 将状态从父级转移到子级。在您的场景中,您可以通过 Redux 来完成。这是用于全局状态管理。
,您可以将 params 中的这些值传递到另一个页面,然后按照下面这个主题的示例获取它。
react-router-pass-param-to-component
没有必要使用 localstorage 或 redux 来做类似的事情。
,有多种方法可以做到这一点。
-
这是最简单的方法,如果您没有太多要在页面之间发送的内容,则可以使用
localStorage
浏览器 API。您也可以在 reactjs-localstorage 的帮助下完成。 -
这有点复杂,但从长远来看,随着规模的扩大,可能会更好,请使用
Redux
全局状态管理来实现这一点。