useState不会更新变量[duplicate]的值

问题描述 投票:0回答:3

我是使用React钩子的新手,所以当我尝试更改变量的值时,我想解决一个出现的问题。当我尝试设置从外部API返回的值时,它将在数据中打印返回可捕获的信息,但是,使用useState(setVariable)在其他部分使用该值时,该值显示为空白。这是我的代码示例:

const InicioSesion: React.FC<{}> = () => {

const [token, setToken] = useState('');
const [success, setSucess] = useState(false);
const [userLogin, setUserLogin] = useState({
    'nombre' : '',
    'password' : ''
});

const actualizarUser = (e: any)  => {
    setUserLogin({
        ...userLogin,
        [e.target.name]: e.target.value
    });
}

const sendInfo = () => {
    axios.post('https://service.herokuapp.com/login',  JSON.parse('{"nombre":"' + userLogin.nombre + '", "password":"' + userLogin.password + '"}') )
    .then(res => {
        console.log(res);
        console.log(res.data.Authorization); //Here appears like I got the token as response

        setToken(res.data.Authorization); // Here I'm trying to set my variable with the value obtained.

        console.log(token); //Here prints as if I didn't asing any value.

        handleOpen();
    }).catch(error => {
        console.log(error.response)
    });
}

const handleOpen = () => {
    setSucess(true);
}

const handleClose = () => {
    setSucess(false);
}

return(
    <div>
        <h1>Iniciar sesión</h1>
        <Container placeholder>
            <Segment>
            <Form>
                <Form.Field>
                    <label>Correo</label>
                    <input placeholder='Ingresa tu correo' name='nombre' onChange={actualizarUser}/>
                </Form.Field>
                <Form.Field>
                    <label>Contraseña</label>
                    <input placeholder='Ingresa tu contraseña' name='password' onChange={actualizarUser}/>
                </Form.Field>

                <Link to={{ pathname:'/init/home', state:{ value: token } }}>
                    <Button type='submit'>SubmitNuevo</Button>
                </Link>
                <Button type='submit' onClick={sendInfo}>Prueba</Button>
            </Form>
            </Segment>
        </Container>

        <Modal show={success} onHide={handleClose}>
            <Modal.Header closeButton>
            <Modal.Title>Registro exitoso</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                Su local se ha creado exitosamente. Ahora puede iniciar sesión.
            </Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={handleClose}>
                    Cerrar
                </Button>
            </Modal.Footer>
        </Modal>
    </div>
);

谢谢您的帮助。

javascript reactjs react-hooks
3个回答
0
投票

之所以看不到更新后的状态,是因为状态的更新是异步的,因此您需要等待下一次重新渲染,才能正确显示更新后的状态值。因此,执行以下操作仍将导致记录之前的令牌值:

setToken(res.data.Authorization); 
console.log(token); 

如果您希望打印/记录已更新令牌的值,一种解决方法是使用useEffect钩子:

useEffect(() => {
  console.log(token);
}, [token]);

这将在请求返回且状态已更新时从API响应中打印新令牌的值。


0
投票

这是因为setToken方法是异步的,并且在console.log(token);之前执行setToken(res.data.Authorization);。您可以使用带有令牌参数的useEffect挂钩来检测令牌的更改时间并执行useEffect中的代码。


0
投票

useState异步工作,因此状态更新存在滞后。我建议使用useRef挂钩立即更新。这里是一些文档:https://reactjs.org/docs/hooks-reference.html#useref

© www.soinside.com 2019 - 2024. All rights reserved.