Я новичок в 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>
);
}
Вот результат, который я хочу:
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>
);
}
В этом коде вы фактически не передаете никаких свойств компоненту User при перенаправлении на / user. Чтобы пользователь мог получить доступ к состоянию из входа в систему, вам необходимо либо использовать контекстный API, либо использовать библиотеку управления состоянием, такую как redux или mobx.