Я новичок в React, и я пытаюсь передавать данные между экранами с помощью props, но не работает, вот мой код:

Login.jsx: у меня есть способ отправить форму, получить данные из API и проверить, правда ли это, а затем перейти на страницу «Пользователи»:

handleSubmit = event => {
        var user = this.state.user
        var password = this.state.password
        this.state.users.forEach(users => {
            if ((users.name === user) && (users.password === password)) {
                alert("Login Successful!")
                this.setState(() => ({ 
                    toUser: true,
                    isLogin: true,
                    userId: users.id,
                 }));
            } else {
                alert("Verify the information you have entered!")
            }
        });
    }

render() {
        if (this.state.toUser === true) {
            return <Redirect to='/user' />
        }

    return (
        <div className="Login">
            <h3>USER AREA</h3>
            <form onSubmit={this.handleSubmit}>

                <FormGroup controlId="user" bsSize="large">
                    <ControlLabel>Username</ControlLabel>
                    <FormControl
                        autoFocus
                        type="user"
                        value={this.state.user}
                        onChange={this.handleChange}
                    />
                </FormGroup>
                <FormGroup controlId="password" bsSize="large">
                    <ControlLabel>Password</ControlLabel>
                    <FormControl
                        value={this.state.password}
                        onChange={this.handleChange}
                        type="password" />
                </FormGroup>
                <Button
                    block
                    bsStyle="primary"
                    bsSize="large"
                    disabled={!this.validateForm()}
                    type="submit"
                >
                    LOGIN
                </Button>
            </form>
        </div>
    );
}

User.jsx: я хочу получать данные от входа в систему для использования на странице пользователей, я пробовал что-то вроде этого:

constructor(props) {
        super(props);
        this.state = {
            user: "",
            password: "",
            'users': [],
            toUser: false,
            userId: this.props.userId,
        };
    }

render() {
        return (
            <div className="Login">
                <h3>USER AREA {this.props.userId}</h3>
            </div>
        );
    }

Вот результат, который я хочу:

enter image description here

1
Jefferson Bruchado 23 Окт 2018 в 12:50

2 ответа

Лучший ответ

Что я сделал для передачи данных с помощью истории,

this.props.history.push({
         pathname:"/user",
         state:{
             userId:"1"
          }
 });

И вы можете получить доступ, например, this.props.location.state.userId

handleSubmit = event => {
        var user = this.state.user
        var password = this.state.password
        this.state.users.forEach(users => {
            if ((users.name === user) && (users.password === password)) {
                alert("Login Successful!")

             this.props.history.push({
                pathname:"/user",
                state:{
                    userId:users.id
                 }
             });
            } else {
                alert("Verify the information you have entered!")
            }
        });
    }

render() {
      return (
        <div className="Login">
            <h3>USER AREA</h3>
            <form onSubmit={this.handleSubmit}>

                <FormGroup controlId="user" bsSize="large">
                    <ControlLabel>Username</ControlLabel>
                    <FormControl
                        autoFocus
                        type="user"
                        value={this.state.user}
                        onChange={this.handleChange}
                    />
                </FormGroup>
                <FormGroup controlId="password" bsSize="large">
                    <ControlLabel>Password</ControlLabel>
                    <FormControl
                        value={this.state.password}
                        onChange={this.handleChange}
                        type="password" />
                </FormGroup>
                <Button
                    block
                    bsStyle="primary"
                    bsSize="large"
                    disabled={!this.validateForm()}
                    type="submit"
                >
                    LOGIN
                </Button>
            </form>
        </div>
    );
}
1
Asif vora 23 Окт 2018 в 10:05

В этом коде вы фактически не передаете никаких свойств компоненту User при перенаправлении на / user. Чтобы пользователь мог получить доступ к состоянию из входа в систему, вам необходимо либо использовать контекстный API, либо использовать библиотеку управления состоянием, такую как redux или mobx.

1
Avinash 23 Окт 2018 в 10:03
52946087