我知道的唯一方法是调用setState(current_value =>…)函数，并在我们的逻辑中使用current_value。一定要把它还回去。例:

const myPollingFunction = () => {
    setInterval(() => {
        setState(latest_value => {
            // do something with latest_value
            return latest_value;    
        }
    }, 1000);
};

2021年6月更新:

使用NPM模块react-usestateref总是获得最新的状态值。它完全向后兼容React useState API。

示例代码如何使用它:

import useState from 'react-usestateref';

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

console.log(couterRef.current); // it will always have the latest state value
setCount(20);
console.log(counterRef.current);

NPM包react-useStateRef允许你通过使用useState访问最新的状态(如ref)。

2020年12月更新:

为了解决这个问题，我创建了一个react模块。React - useStateRef (React useStateRef)。使用的例子:

var [state, setState, ref] = useState(0);

它的工作方式完全像useState，但除此之外，它给你在ref.current下的当前状态

了解更多:

https://www.npmjs.com/package/react-usestateref

原来的答案

您可以使用setState来获取最新的值

例如:

var [state, setState] = useState(defaultValue);

useEffect(() => {
   var updatedState;
   setState(currentState => { // Do not change the state by getting the updated state
      updateState = currentState;
      return currentState;
   })
   alert(updateState); // the current state.
})

我将使用setInterval()和useEffect()的组合。

setInterval() on its own is problematic, as it might pop after the component has been unmounted. In your toy example this is not a problem, but in the real world it's likely that your callback will want to mutate your component's state, and then it would be a problem. useEffect() on its own isn't enough to cause something to happen in some period of time. useRef() is really for those rare occasions where you need to break React's functional model because you have to work with some functionality that doesn't fit (e.g. focusing an input or something), and I would avoid it for situations like this.

您的示例没有做任何非常有用的事情，而且我不确定您是否关心计时器弹出有多规律。因此，使用这种技巧大致达到你想要的效果的最简单方法如下:

import React from 'react';

const INTERVAL_FOR_TIMER_MS = 3000;

export function Card({ title }) {
  const [count, setCount] = React.useState(0)

  React.useEffect(
    () => {
      const intervalId = setInterval(
        () => console.log(`Count is ${count}`),
        INTERVAL_FOR_TIMER_MS,
      );
      return () => clearInterval(intervalId);
    },
    // you only want to restart the interval when count changes
    [count],
  );

  function clickHandler() {
    // I would also get in the habit of setting this way, which is safe
    // if the increment is called multiple times in the same callback
    setCount(num => num + 1);
  }

  return (
    <div>
      Active count {count} <br/>
      <button onClick={clickHandler}>Increment</button>
    </div>
  );
}

需要注意的是，如果计时器弹出，那么您将在一秒钟后单击，那么下一个日志将在前一个日志后4秒出现，因为单击时计时器将重置。

如果您想解决这个问题，那么最好的方法可能是使用Date.now()来查找当前时间，并使用新的useState()来存储您想要的下一次弹出时间，并使用setTimeout()而不是setInterval()。

这有点复杂，因为你必须存储下一个计时器弹出，但不是太糟糕。这种复杂性也可以通过简单地使用一个新函数来抽象出来。总结一下，这里有一个使用钩子启动周期计时器的安全“反应”方法。

import React from 'react';

const INTERVAL_FOR_TIMER_MS = 3000;

const useInterval = (func, period, deps) => {
  const [nextPopTime, setNextPopTime] = React.useState(
    Date.now() + period,
  );
  React.useEffect(() => {
    const timerId = setTimeout(
      () => {
        func();
        
        // setting nextPopTime will cause us to run the 
        // useEffect again and reschedule the timeout
        setNextPopTime(popTime => popTime + period);
      },
      Math.max(nextPopTime - Date.now(), 0),
    );
    return () => clearTimeout(timerId);
  }, [nextPopTime, ...deps]);
};

export function Card({ title }) {
  const [count, setCount] = React.useState(0);

  useInterval(
    () => console.log(`Count is ${count}`),
    INTERVAL_FOR_TIMER_MS,
    [count],
  );

  return (
    <div>
      Active count {count} <br/>
      <button onClick={() => setCount(num => num + 1)}>
        Increment
      </button>
    </div>
  );
}

只要您在deps数组中传递interval函数的所有依赖项(与useEffect()完全一样)，您就可以在interval函数中做任何您喜欢的事情(设置状态等)，并且确信没有任何东西会过时。

不要尝试在回调中访问最近的状态，而是使用useEffect。使用setState返回的函数设置状态不会立即更新您的值。状态更新是批处理和更新的

如果您将useEffect()看作是setState的第二个参数(来自基于类的组件)，这可能会有所帮助。

如果你想用最近的状态做一个操作，使用useEffect()，当状态改变时，它会被击中:

const { useState, useEffect } = React; function App() { const [count, setCount] = useState(0); const decrement = () => setCount(count-1); const increment = () => setCount(count+1); useEffect(() => { console.log("useEffect", count); }, [count]); console.log("render", count); return ( <div className="App"> <p>{count}</p> <button onClick={decrement}>-</button> <button onClick={increment}>+</button> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render( < App / > , rootElement); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script> <div id="root"></div>

更新

你可以为setInterval创建一个钩子，并像这样调用它:

const { useState, useEffect, useRef } = React; function useInterval(callback, delay) { const savedCallback = useRef(); // Remember the latest callback. useEffect(() => { savedCallback.current = callback; }, [callback]); // Set up the interval. useEffect(() => { function tick() { savedCallback.current(); } if (delay !== null) { let id = setInterval(tick, delay); return () => clearInterval(id); } }, [delay]); } function Card(title) { const [count, setCount] = useState(0); const callbackFunction = () => { console.log(count); }; useInterval(callbackFunction, 3000); useEffect(()=>{ console.log('Count has been updated!'); }, [count]); return (<div> Active count {count} <br/> <button onClick={()=>setCount(count+1)}>Increment</button> </div>); } const el = document.querySelector("#root"); ReactDOM.render(<Card title='Example Component'/>, el); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script> <div id="root"></div>

关于useEffect()的更多信息

我知道的唯一方法是调用setState(current_value =>…)函数，并在我们的逻辑中使用current_value。一定要把它还回去。例:

const myPollingFunction = () => {
    setInterval(() => {
        setState(latest_value => {
            // do something with latest_value
            return latest_value;    
        }
    }, 1000);
};

我也有类似的问题，但在我的情况下，我使用redux与钩子，也没有在同一个组件中改变状态。我有方法在回调使用的状态值分数和它(回调)有旧的分数。 我的解决方法很简单。它不像以前的那样优雅，但在我的情况下，它做到了，所以我把它放在这里，希望它能帮助到别人。

const score = useSelector((state) => state.score);
const scoreRef = useRef(score);

useEffect(() => {
    scoreRef.current = score ;
}, [score])

一般思想是将最新状态存储在ref:)