React useState() 不会同步更新值

Question

如果在设置值之后调用，React useState() 不会更新变量的值。

我阅读了有关 useEffect() 的信息，但我真的不知道这对这个特定场景有什么用处。

Full code（请打开控制台标签查看变量状态）

更新

// hook
const [ error, setError ] = useState<boolean>();
const handleSubmit = (e: any): void => {
    e.preventDefault();
    if (email.length < 4) {
      setError(true);
    }
    if (password.length < 5) {
      setError(true);
    }
    console.log(error); // <== still false even after setting it to true
    if (!error) { 
      console.log("validation passed, creating token");
      setToken();
    } else {
      console.log("errors");
    }
  };

Answer 1

假设用户没有有效的凭据。问题出在这里：

if (email.length < 4) {  // <== this gets executed
  setError(true);
}
if (password.length < 5) { // <== this gets executed
  setError(true);
}
console.log(error); // <== still false even after setting it to true
if (!error) { // <== this check runs before setError(true) is complete. error is still false.
  console.log("validation passed, creating token");
  setToken();
} else {
  console.log("errors");
}

您正在使用多个独立运行的 if 检查，而不是使用单个检查。您的代码执行所有 if 检查。在一项检查中，当满足其中一个条件时调用setError(true)，但setError() 是异步的。在调用下一个 if-check 之前，该操作不会完成，这就是为什么它看起来您的值从未保存过。

您可以使用 if-else 和 useEffect 的组合来更简洁地执行此操作：https://codesandbox.io/s/dazzling-pascal-78gqp

import * as React from "react";

const Login: React.FC = (props: any) => {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [error, setError] = React.useState(null);

  const handleEmailChange = (e: any): void => {
    const { value } = e.target;
    setEmail(value);
  };

  const handlePasswordChange = (e: any): void => {
    const { value } = e.target;
    setPassword(value);
  };

  const handleSubmit = (e: any): void => {
    e.preventDefault();
    if (email.length < 4 || password.length < 5) {
      setError(true);
    } else {
      setError(false);
    }
  };

  const setToken = () => {
    //token logic goes here
    console.log("setting token");
  };

  React.useEffect(() => {
    if (error === false) {
      setToken();
    }
  }, [error]); // <== will run when error value is changed.

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="email@address.com"
          onChange={handleEmailChange}
        />
        <br />
        <input
          type="password"
          placeholder="password"
          onChange={handlePasswordChange}
        />
        <br />
        <input type="submit" value="submit" />
      </form>

      {error ? <h1>error true</h1> : <h1>error false</h1>}
    </div>
  );
};

export default Login;

Answer 2

就像setState 一样，useState 是异步的，并且倾向于一起批量更新以提高性能。 useEffect 让您走在正确的轨道上，这将允许您在状态更新后有效地执行回调。

来自docs的示例：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

虽然也建议您在请求更新状态后立即需要更新的值，但您最好只在组件中使用一个变量。

More on using state synchronously

如果您熟悉 Redux 的 reducer，您可以使用 useReducer 作为另一种选择。来自docs：

当你有复杂的情况时，useReducer 通常比 useState 更可取 涉及多个子值或下一个状态时的状态逻辑 取决于前一个。 useReducer 还可以让您优化 触发深度更新的组件的性能，因为您可以 向下传递调度而不是回调。