Передача данных через экраны

Question

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

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>
        );
    }

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

Answer 1

Что я сделал, чтобы передать данные, используя историю,

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>
    );
}

Answer 2

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