状态不会立即更新，即使使用 prevState

Question

我正在尝试将“电子邮件”（这是一种状态）分配给“refE​​mail.current.value”。

所以我做setEmail(response.data) 并且当我做console.log(response.data) 时，我有预期的数据，但如果我在console.log(email) 之后立即做，我仍然有我的状态的默认值。我尝试使用 prevState 但它没有改变任何东西：setEmail(prevState => prevState, response.data)

这是我的代码：

const EditProfilModal = () => {

  const [email, setEmail] = useState('exemple') 

  const refFirstname = useRef();
  const refLastname = useRef();
  const refEmail = useRef();

  useEffect(() => {
    const toFetchEmail = async () => {
      try {
        const params = JSON.parse(localStorage.getItem("user")).user_id;
        const response = await axios.get(`http://localhost:4200/api/user/${params}`);
        setEmail(prevState => prevState, response.data)        
        console.log(response.data)
        console.log(email);
      } catch (err) {
        throw err;
      }
    };
    toFetchEmail()
    refFirstname.current.value = JSON.parse(localStorage.getItem("user")).user_firstname;
    refLastname.current.value = JSON.parse(localStorage.getItem("user")).user_lastname;
    refEmail.current.value = email;
  }, []);

  return (.....)

因此，第一个 console.log 返回预期数据，但第二个返回默认值（示例）而不是预期数据。为什么以及如何立即更新状态？

Answer 1

这与useState set method not reflecting change immediately 中提到的问题相同 和 setState in react functional components is not being assigned property with assigned objects

React setState 或 useState 函数不会立即更改您的变量，它是一个异步过程，只会在下一次渲染时设置您的值，

console.log(email)
setEmail(newEmail)
console.log(email)

此代码显示与当前属性相同的日志尚未使用新属性更新，要检查状态变量的更改，您可以在函数之外（在组件返回之前）或在 useEffect 中检查它

useEffect(()=> {
    conole.log(email) // this will console latest value on your every `email` update
 },[email])

或者您可以在返回 HTML 之前简单地对其进行控制台，或者在 HTML 中，该值将在下一次渲染时自动更新

const EditProfilModal = () => {

  const [email, setEmail] = useState('exemple') 

  const refFirstname = useRef();
  const refLastname = useRef();
  const refEmail = useRef();

  useEffect(() => {
    const toFetchEmail = async () => {
      try {
        const params = JSON.parse(localStorage.getItem("user")).user_id;
        const response = await axios.get(`http://localhost:4200/api/user/${params}`);
        setEmail(prevState => prevState, response.data)        
        console.log(response.data)
       } catch (err) {
        throw err;
      }
    };
    toFetchEmail()
    refFirstname.current.value = JSON.parse(localStorage.getItem("user")).user_firstname;
    refLastname.current.value = JSON.parse(localStorage.getItem("user")).user_lastname;
    refEmail.current.value = email;
  }, []);
  console.log(email);  //This will console email on every render, you can check the update each time. it always consoles the latest updated value.
  return (.....)