在反应中将数据从一页传递到另一页答案

【问题标题】：Pass data from one page to another in react在反应中将数据从一页传递到另一页
【发布时间】：2021-06-24 16:44:39
【问题描述】：

我有一页上有一个表格，上面有图片、名称和描述以及一个“书”按钮。我想将所有这些值传递到另一个页面。

这是显示数据的页面。我有许多不同数据的表格。


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;

有人知道我该怎么做吗？

【问题讨论】：

这两者之间是否有真正的页面重新加载，或者你只是在你的反应应用中切换两个视图？
嘿@Martin 所以在路由下有一个页面，我们可以称之为 /people ，一旦你点击 /people 路由中的查看按钮，它会将你带到另一个路由 /peopleInfo 让我们调用它。

标签： javascript reactjs react-hooks use-state

【解决方案1】：

有多种方法可以做到这一点。

这是最简单的方法，如果您没有太多内容要在页面之间发送，您可以使用 localStorage 浏览器 API。您也可以在reactjs-localstorage 的帮助下完成。
这有点复杂，但从长远来看，随着您的扩展，可能会更好，使用Redux 全局状态管理来实现这一点。

【讨论】：

【解决方案2】：

您可以将参数中的这些值传递到另一个页面，然后按照下面的本主题示例获取它。

react-router-pass-param-to-component

没有必要使用 localstorage 或 redux 来做类似的事情。

【讨论】：

【解决方案3】：

在反应中，您通过道具将状态从父母转移到孩子。在您的场景中，您可以通过 Redux 来完成。这用于全局状态管理。

【讨论】：

【解决方案4】：

我认为最简单的方法是使用localStorage 或HTTP GET 参数。

另一种（更高级的）方法是使用 react-router 和某种全局状态管理。

【讨论】：