javascript - 跨屏幕传递数据

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

这就是我想要的结果：

标签： javascriptreactjsfetch

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