Question

我是使用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>
);

感谢您的帮助。

Answer 1

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

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

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

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

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

Answer 2

这是因为setToken方法是异步的，并且console.log(token);在setToken(res.data.Authorization);之前执行。您可以将useEffect钩子与token参数一起使用，以检测何时更改了令牌并执行useEffect中的代码。

Answer 3

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

useState不会更新我的变量的值

3 个答案: