useState 不会更新我的变量的值 [重复]答案

【问题标题】：useState doesn't update the value of my variable [duplicate]useState 不会更新我的变量的值 [重复]
【发布时间】：2020-08-31 19:57:49
【问题描述】：

我是使用 react hooks 的新手，所以我想解决当我尝试更改变量的值时出现的问题。当我尝试设置从外部 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>
);

感谢您的帮助。

【问题讨论】：

在 React 中设置状态是异步的，所以如果你在下一行console.log 它不会显示更新。如果您想了解更多信息或示例，只需搜索 SO，已经有大约一百万个帖子了

标签： javascript reactjs react-hooks

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：