[英]Why is state set to null immediately after setter function defined by useState is called?
I refactored my App.js into a functional component.我将我的 App.js 重构为一个功能组件。 When I try to login, my currentUser is set to a user, but then immediately set to null.
当我尝试登录时,我的 currentUser 设置为用户,但随后立即设置为 null。 I am confused why currentUser is set to null after it is given value.
我很困惑为什么在给定值后将 currentUser 设置为 null 。 Is something calling
setCurrentUser
again to set it to null?是否再次调用
setCurrentUser
将其设置为 null?
App.js:应用程序.js:
const App = (props) => {
const [ currentUser, setCurrentUser ] = useState(null)
const [ shoppingCart, setShoppingCart ] = useState([])
const handleLogin = (email, password, history) => {
axios({
method: 'post',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
data: { email, password},
url: 'http://localhost:3000/api/v1/login'
})
.then( res => setCurrentUser(res.data.user))
}
console.log('this is currentUser', currentUser)
return (
<Switch>
<div>
<SideDrawer currentUser={currentUser} setCurrentUser={setCurrentUser}/>
<div className='App'>
{/** OTHER ROUTES HERE **/}
<Route path='/login' render={
() => {
return (
<Login handleLogin={handleLogin} history={props.history} currentUser={currentUser}/>
)
}
} />
{/* Route to Signup page */}
<Route path='/signup' render={
() => {
return(
<SignupForm setCurrentUser={setCurrentUser} history={props.history}/>
)
}
} />
</div>
</div>
</Switch>
Login.js登录.js
const Login = ({history, handleLogin}) => {
const classes = useStyles()
const [ values, setValues ] = useState({
email: '',
password: '',
showPassword: false
})
const handleChange = e => {
const { name, value } = e.target
setValues({ ...values, [name]: value})
}
const handleShowPassword = () => {
setValues({...values, showPassword: !values.showPassword})
}
const handleMouseDownPassword = (e) => {
e.preventDefault()
}
return (
<Box className={classes.container}>
<h1>Login</h1>
<FormGroup>
<FormControl variant="outlined">
<TextField
className={classes.text}
variant='outlined'
multiline
name='email'
label="Email"
onChange={handleChange}
/>
</FormControl>
<FormControl variant='outlined'>
<TextField
label='Password'
className={classes.text}
type={values.showPassword ? 'text' : 'password'}
name='password'
margin="normal"
variant='outlined'
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment>
<IconButton
onClick={handleShowPassword}
onMouseDown={handleMouseDownPassword}
>
{values.showPassword ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
)
}}
/>
</FormControl>
<Button
variant='contained'
className={classes.button}
onClick={ () => handleLogin(values.email, values.password, history)}
>
Login
</Button>
</FormGroup>
</Box>
)
}
Something is setting it to null.有些东西将其设置为 null。
Either: .then( res => setCurrentUser(res.data.user))
要么:
.then( res => setCurrentUser(res.data.user))
or SideDrawer
or SignupForm
are calling setCurrentUser(null)
.或
SideDrawer
或SignupForm
正在调用setCurrentUser(null)
。
If you remove both SideDrawer
and SignupForm
you can check the functionality of the .then( res => setCurrentUser(res.data.user))
line.如果您同时删除
SideDrawer
和SignupForm
,您可以检查 .then .then( res => setCurrentUser(res.data.user))
行的功能。
Then add back SideDrawer
and see if that is causing it to be set to null.然后添加回
SideDrawer
并查看是否导致它被设置为 null。 Lastly, add back SignupForm
and see if that's the culprit.最后,添加回
SignupForm
并查看是否是罪魁祸首。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.