如何在useState hook React中异步设置状态

Question

I want to change var value, which is initialized with useState hook after some timeout. What is proper way to achieve this? That's my try:

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;
    });
  }, []);

Sandbox

Answer 1

You can achieve this with this code:

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>;
}

The value for variable msg change after 1 second to Another value.

Answer 2

Since the other answer and the solution in the comments are missing a rather important thing, here's my take on the problem:

    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>
    )

Whenever you are using something asynchronous in an effect hook, you should provide a cleanup function. Even here, where the hook runs only once.

Why? Because otherwise you get an error if the component is unmounted before the timeout ran.

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>) }