в MERN реагирует, как я могу отправить данные JSON из одного компонента в другой и как их получить - PullRequest
Новая
       8

в MERN реагирует, как я могу отправить данные JSON из одного компонента в другой и как их получить

0 голосов
/ 25 сентября 2018

Я занимаюсь разработкой приложения в MERN (Mongo, Express, React, Node).После успешного сохранения данных я перехожу к другому компоненту. Теперь я хочу перейти к другому компоненту с некоторыми данными json, может кто-нибудь помочь с этим.также дайте мне знать, как получить данные json в другом компоненте.

Вот код, из которого я успешно перемещаюсь в / wellcomback, дайте мне знать, как я могу отправить некоторые данные json на экран «Welcome back».

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;

вот мой экран возврата к скважине, на котором я успешно выполняю рендеринг, также дайте мне знать, как я могу получить данные здесь 

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;

1 Ответ

0 голосов
/ 25 сентября 2018

Вы также можете отправить такие данные: 

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

В другом компоненте: 

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

От Документы React Router Docs : state специфичное для местоположения состояние, которое было предоставлено, например, push(path, state), когда это местоположение было помещено в стек.Доступно только в истории браузера и памяти.

...