将函数作为回调传递给使用挂钩创建的React状态并没有反映变量的新值

Question

当我们在ReactJS状态上存储函数时，我在这里遇到了一些非常奇怪的事情。

我用钩子创建了一个react状态，其中包含：

1. 数字变量
2. 回调函数

由于钩子本身在setState期间没有回调，所以我使用此方法在状态更改后的useEffect期间切换回调。

我在setState期间传递的回调是打印state.number和secondNumber值的值。设置状态完成后，state.number的值应为4，secondNumber的值应为15（如果我要在useEffect开始时对console.log进行测试）。

但是触发回调函数的state.callback（）仍然打印出原始数字，即state.number=2和secondNumber=10。

我觉得很奇怪，因为回调是在state.number的值之后调用的，第二个数字是更改的。

有人知道这里的代码会发生什么吗？

    function App(){
      const [state, setState] = useState({
        number : 2,
        callback : null
      });
      let secondNumber = 10;
    
      useEffect(() => {
        if (state.callback){
          secondNumber = 15;
          state.callback();
        }
      }, [state]);
    
      const toggleButton1 = () => {
       setState({
         number : 4,
         callback : () => {
           console.log('state number',state.number);
           console.log('second number', secondNumber);
         }
       })
      }
      
      return (
        //button trigger function toggleButton1
      )
    }
    
    export default App;

Answer 1

const toggleButton1 = () => {
  setState({
    number : 4,
    callback : () => {
      console.log('state number', state.number);
      console.log('second number', secondNumber);
    }
  })
}

这将包含存储回调中当前呈现周期的当前状态和第二个值。稍后调用它将在存储时使用该值。

只需在effect钩子中执行您想要对更新状态执行的操作。功能组件状态更新实际上没有基于类的组件的setState回调参数的等价物，具有适当依赖关系的useffect是其等价物。

function App(){
  const [state, setState] = useState({
    number : 2,
    callback : null
  });
  let secondNumber = 10;

  useEffect(() => {
    console.log('state number', state.number);
    console.log('second number', secondNumber);
  }, [state.number]);

  const toggleButton1 = () => {
   setState({
     number : 4,
   })
  }
  
  return (
    //button trigger function toggleButton1
  )
}

export default App;

仅供参考，根据定义，secondNumber将被重置/重新定义回每个渲染周期10，您可以在每个周期内对其进行变异，但每次都会重置。