reactjs - 关于useState(React)的理解

Question

你能解释一下为什么这个简单的代码不能按预期工作吗？有一个名为“启动计时器”的按钮指向“计时”功能。我认为使用 setCount 会更新计数变量状态，但它每秒保持在 0。 useState 不正是用来更新变量的吗？谢谢你的帮助 !PS:在按钮中，我只是将 onClick 重命名为 clicAction 以在我的组件中使用它，但这根本不是问题。

import { Button } from './components/Button';
import { useState, useEffect } from 'react';

function App() {

  const [count, setcount] = useState(0);
  
 const chrono = () => {
   setInterval(() => {
    setcount(count +1);
    console.log(count);
   }, 
   1000);
 }

  return (
    <>
    <Button clicAction={chrono} nom="Start the timer"/>
    <p>{count}</p>
    </>
  );
}

export default App;

这是 Button 组件代码:

import { useState } from 'react';

export const Button = ({nom, clicAction}) => {

    return (
        <div>
            <button onClick={clicAction}>{nom}</button>
        </div>
    )
}

Answer 1

这是间隔回调中 count 状态的陈旧外壳。 count 的值从来都不是更新的引用。使用功能状态更新从以前的 count 状态值正确更新。

如果您想记录状态更新，则使用 useEffect 来记录更新时的 count 状态。

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

useEffect(() => {
  console.log(count);
}, [count]);


const chrono = () => {
  setInterval(() => {
    setCount(count => count +1);
  }, 1000);
}