如何解决子组件在第二次尝试中发送正确的数据
我正在尝试将一个对象从我的子组件发送到它的父组件。我通过 fetch 获取数据,使用 state 更新 JSON 对象中的响应并通过 props 发送它。但是,我第一次发送它时,它会发送“abc”或我最初分配给对象的任何值,然后第二次发送响应。
function Login(props) {
const loginAttempt = (email,password) => {
fetch('http://localhost:5000/user/login',{
method: 'POST',headers: {
'Accept': 'application/json','Content-Type': 'application/json'
},body: JSON.stringify({
email: email,password: password
})
})
.then(res => res.json())
.then(data => {
setUserData({
status: data.status,name: data.name,token: data.token
})
props.handleUserData(userData)
})
.catch(err => console.log(err))
}
const classes = useStyles()
const [email,setEmail] = React.useState('')
const [password,setPassword] = React.useState('')
const [userData,setUserData] = React.useState('abc')
const handleEmail = (event) => {
setEmail(event.target.value)
}
const handlePassword = (event) => {
setPassword(event.target.value)
}
return (
<div className="login-container">
<Grid container spacing={2} direction="column" alignItems="center">
<Grid item>
<TextField className={classes.fieldStyle} variant="outlined" label="Email Address" onChange={handleEmail} />
</Grid>
<Grid item>
<TextField className={classes.fieldStyle} variant="outlined" label="Password" type="password" onChange={handlePassword} />
</Grid>
<Grid item>
<Button className={classes.buttonStyle} variant="outlined"
onClick={() => loginAttempt(email,password)}
>
Login
</Button>
</Grid>
<Grid item>
<Button className={classes.buttonStyle} variant="outlined">Forgot Password</Button>
</Grid>
</Grid>
</div>
);
}
解决方法
钩子中的 setter 不同步,所以如果你这样做
editable: (params) => {
if(params.data.rowIsNotEditable)
return false;
else
return true;
}
您不能立即访问 useData,因为它可能不会更新。
我建议您使用 setUserData({
status: data.status,name: data.name,token: data.token
})
在更新 userData 时触发,并从那里更新父状态。
喜欢
useEffect
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。