在 MERN 反应中，我如何将 JSON 数据从一个组件发送到另一个组件以及如何获取它答案

【问题标题】：in MERN react, how i can send JSON data from one component to another and how to fetch it在 MERN 反应中，我如何将 JSON 数据从一个组件发送到另一个组件以及如何获取它
【发布时间】：2019-03-01 05:25:37
【问题描述】：

我正在 MERN（Mongo、Express、React、Node）中开发应用程序。成功保存数据后，我正在导航到另一个组件现在我想用一些 json 数据导航到另一个组件，任何人都可以帮助解决这个问题。也让我知道如何在另一个组件中获取 json 数据。

这是我成功导航到 /wellcomback 的代码，请告诉我如何将一些 json 数据发送到“欢迎回来”屏幕。

import React, {Component} from 'react';
import './header.css';

class Signup extends Component{

    constructor() {
        super();
        this.state = {};
    }
    postSignup = (e) => {
        e.preventDefault();
        var email = this.email.value;
        fetch('http://localhost:3001/register/enterDetail/'+email, {
            method: 'get'
        }).then(() =>
            this.props.history.push('/wellcomback')
        ).then(function(response) {
            console.log(response);
        })
    }

    render(){
        return(
            <div className="main_login">
                <div className="sign_up_wrap">
                    <div className="left_side">
                        <h2>Howday!</h2>

                        <p>Go ahead and signup. This will associate your <br /> sign-up info with the profile you are claiming.</p>
                    </div>
                    <div className="right_side  welcm_back">
                        <h2>Sign Up</h2>
                        <form action="/wellcomback">
                            <div className="pms_field">
                                <input type="email" placeholder="" ref={(r) => this.email = r} name="email" />
                                <label>Email</label>
                            </div>
                            <input type="submit" value="Sign Up" onClick={this.postSignup} />
                            <p>By siging up, you indicate that you have read and agree to our <a href='https://www.truebase.io/terms/'>terms and condition</a> and <a href='https://www.truebase.io/privacy/'>privacy policy</a>.</p>
                        </form>
                    </div>
                </div>
            </div>
        )
    }
}

export default Signup;

这是我成功渲染的 Wellcomback 屏幕，也请告诉我如何在此处获取数据

import React, {Component} from 'react';
import './header.css';

class WellcomBack extends Component{



    render(){
        return(
            <div className="main_login">
                <div className="sign_up_wrap">
                    <div className="left_side welc_left">
                        <h2>Wellcome Back</h2>
                        <h5>Before you Login and use Truebase,</h5>
                        <p>Please setup your password and basic information.</p>
                    </div>
                    <div className="right_side welcm_back">
                        <form action="/skills">
                            <div className="pms_field">
                                <input type="text" />
                                <label className="default_lable">Your favourite handle</label>
                                <label className="selected_label">Truebase.io/</label>
                            </div>
                            <div className="pms_field">
                                <input type="text" />
                                <label>First Name</label>
                            </div>
                            <div className="pms_field">
                                <input type="text" />
                                <label>Last Name</label>
                            </div>
                            <div className="pms_field">
                                <div id="password_strength"></div>
                            </div>
                            <div className="pms_field">
                                <input type="password" />
                                <label>Confirm Password</label>
                            </div>
                            <input type="submit" value="Proceed" />
                        </form>
                    </div>
                </div>

            </div>
        )
    }
}

export default WellcomBack;

【问题讨论】：

以上场景建议你使用redux或者最新的context api。

标签： reactjs mern

【解决方案1】：

你也可以像这样发送一些数据：

this.props.history.push('/wellcomback', {
  data: response.data
})

然后在另一个组件中：

console.log(this.props.location.state.data)

来自React Router Docs： state 提供给例如位置特定的状态。 push(path, state) 当这个位置被压入堆栈时。仅在浏览器和内存历史记录中可用。

【讨论】：