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

Question

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

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

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)

我试图通过存储到 state 中首先使用名称值来测试它。 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;

有谁知道我该怎么做？

Answer 1

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

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

Answer 2

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

Answer 3

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

反应路由器传递参数到组件

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

Answer 4

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

1. 这是最简单的方法，如果你没有太多的东西要在页面之间发送，你可以使用localStorage浏览器 API。 你也可以在reactjs-localstorage的帮助下完成。

2. 这有点复杂，但从长远来看，随着您的扩展可能会更好，使用Redux全局 state 管理来实现这一点。