Question

如何立即更新数字状态并查看console.log(number)的更新值？

    const [number,setNumber] = useState(0);
    const minus = () => {
      setNumber(number-1);
      console.log(number);
    }
    return (
     <>
      <div>{number}</div>
      <button onClick={minus}>-</button>
     </>
    )

Answer 1

尝试一下

 setNumber((number)=> {number-1 ; console.log(number)});

Answer 2

const [number,setNumber] = useState(0);
    const minus = () => {
      // setNumber(number-1);  
      // It is also work well but it is working with async. 
      // So you can't see the below console.log().
      // console.log(number);
      setNumber((prevNumber) => {
        newNumber = prevNumber - 1;
        console.log(newNumber);
        return newNumber;
      });
    }

    return (
     <>
      <div>{number}</div>
      <button onClick={minus}>-</button>
     </>


)

Answer 3

您试图做的是一个副作用：在控制台上打印一些东西。

这是useEffect钩子的作用-它使您可以执行副作用。

所以这是一个可能的实现：

function App() {
  const [number, setNumber] = useState(0);
  const minus = () => {
    setNumber(number - 1);
  };
  useEffect(() => {
    console.log(number);
  }, [number]);
  return (
    <>
      <div>{number}</div>
      <button onClick={minus}>-</button>
    </>
  );
}

当然，如果您仅使用console.log进行调试，那么这可能是一个过大的解决方案。如果是这样，@ zynkn和@ deepak-k的答案就可以了。

React Hooks useState及时更新

3 个答案: