如何在useState hook React中異步設置狀態

Question

我想更改 var 值，該值在超時后使用useState鈎子初始化。 實現這一目標的正確方法是什么？ 這是我的嘗試：

const [msg, setMsg] = useState("Hello");

  const changeMsg = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("Buy");
      }, 1000);
    });
  };

  useEffect(() => {
    setMsg(async () => {
      const res = await changeMsg();
      return res;
    });
  }, []);

沙盒

Answer 1

您可以使用以下代碼實現此目的：

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [msg, setMsg] = useState("Hello");

  const changeMsg = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("Buy");
        setMsg("Another Value");
      }, 1000);
    });
  };

  useEffect(() => {
    changeMsg();
  }, []);

  return <div className="App">Message is: {msg}</div>;
}

變量 msg 的值在 1 秒后更改為另一個值。

Answer 2

由於評論中的另一個答案和解決方案缺少一個相當重要的東西，這是我對這個問題的看法：

    const [msg, setMsg] = useState("Hello");

    useEffect(()=>{
        const timeout = setTimeout(()=>{
            setMsg("Buy");
        }, 1000);
        return ()=>clearTimeout(timeout);
    }, []); //only run on first render

    return (
        <div className="App">Message is: {msg}</div>
    )

每當你在一個效果鈎子中使用異步的東西時，你應該提供一個清理函數。 即使在這里，鈎子只運行一次。

為什么？ 因為否則，如果在超時運行之前卸載組件，則會出現錯誤。

Answer 3

 import React , {useState,useEffect} from 'react' import "./styles.css"; export default function App (){ const [msg,setMsg] = useState("Hello"); useEffect(() => { const clear = setTimeout(() => setMsg("Busy"),2000); return () => {clearTimeout(clear)} },[]) return(<div> <h1>{msg}</h1> </div>) }