![](/img/trans.png)
[英]Why is state being lost in my app when passed via history.push()?
[英]Why props is not being passed by history.push?
SignIn.js 我正在使用 history.push 重定向頁面,但使用它我也傳遞了“用戶名”,但是這個用戶名我無法在重定向頁面“ADMIN.JS”中看到它。因為用戶名用戶輸入了該用戶名我想在重定向頁面中看到它。 admin.js 中的所有其他內容都可見,但只有 {username} 不可見。
import withRoot from './modules/withRoot';
// --- Post bootstrap -----
import React, { useState } from 'react';
import history from './history';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Link from '@material-ui/core/Link';
import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import { Field } from 'react-final-form';
import Typography from './modules/components/Typography';
import AppFooter from './modules/views/AppFooter';
import AppAppBar from './modules/views/AppAppBar';
import Axios from 'axios';
import AppForm from './modules/views/AppForm';
import Button from '@material-ui/core/Button';
import { Alert } from 'react-bootstrap';
import { email, required } from './modules/form/validation';
import RFTextField from './modules/form/RFTextField';
import FormButton from './modules/form/FormButton';
import FormFeedback from './modules/form/FormFeedback';
import TextField from '@material-ui/core/TextField';
import Home from './Home';
import Dashb from './Dashb';
const useStyles = makeStyles((theme) => ({
form: {
marginTop: theme.spacing(6),
},
button: {
marginTop: theme.spacing(3),
marginBottom: theme.spacing(2),
},
feedback: {
marginTop: theme.spacing(2),
},
}));
const SignIn = (props) => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [status, setStatus] = useState(true);
const classes = useStyles();
let demo;
function validateForm() {
if(username.length==3 && password.length==6 )
return 1;
}
function setIncorrect() {
setStatus(false);
}
function setCorrect() {
setStatus(true);
}
const handleSubmit = (event) => {
event.preventDefault()
let user = Axios.get(
'http://localhost:9000/admin-service/admin/check/' +
username +
'/' +
password
)
.then(response => {
demo = response.data
if (demo == true) {
props.history.push({
pathname: '/admin',
username
});
console.log('####')
} else{
console.log('not true')
Functions();
}
})
.catch(error => {
console.log(error.response.data)
setIncorrect()
})
};
function Functions() {
alert("PLEASE ENTER CORRECT CREDENTIALS!!!!!!!!!!")
}
return (
<React.Fragment>
<AppAppBar />
<AppForm>
<React.Fragment>
<Typography variant="h3" gutterBottom marked="center" align="center">
Admin Sign In
</Typography>
</React.Fragment>
<form onSubmit={handleSubmit} className={classes.form} noValidate>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="username"
label="Admin-Id"
name="username"
autoFocus
onChange={e => { setUsername(e.target.value); setCorrect() }}
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
onChange={e => { setPassword(e.target.value); setCorrect() }}
/>
{(!status) && <Alert severity="error">Incorrect credentials. Please try again</Alert>}
<FormButton
type="submit"
className={classes.button}
disabled={!validateForm()}
size="large"
color="secondary"
fullWidth
>
Sign In
</FormButton>
</form>
<Typography align="center">
<Link underline="always" href="/premium-themes/onepirate/forgot-password/">
Forgot password?
</Link>
<p>NOTE-PASSWORD IS YOUR USER PIN</p>
</Typography>
</AppForm>
</React.Fragment>
);
}
export default SignIn;
管理.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './Home.js';
import { Button } from 'react-bootstrap';
const Admin = props => {
const { username } =
(props.location && props.location.state) || {};
return (
<div>
<br/>
<br/>
<h2> Username </h2> {username}
<h1>child component-MILAN</h1>
</div>
);
}
export default Admin;
我認為您需要傳遞一個對象作為第二個參數:
props.history.push({
pathname: '/admin',
{username}
});
正如您在入門中所讀到的:
通過state
:
history.push({
pathname: '/admin',
state: {
username: username
}
});
並從state
讀取:
const username = history.location.state?.username
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.