跨屏幕传递数据

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

在此代码中，当您重定向到/ user时，实际上并没有将任何道具传递给User组件。 为了使用户能够从登录名访问状态，您需要使用上下文api或使用状态管理库，例如redux或mobx。

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