Question

我正在开发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;

Answer 1

您也可以发送一些这样的数据：

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

然后在其他组件中：

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

来自React Router Docs： state已提供给例如push(path, state)，当此位置被推入堆栈时。仅在浏览器和内存历史记录中可用。

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

1 个答案: