将 function 作为回调传递给使用钩子创建的 React state 并未反映变量的新值

Question

当我们在上面存储 function 时，我在这里遇到了关于 ReactJS state 的一些非常奇怪的事情。

我创建了一个带有钩子的反应 state，其中包含：

1. 数字变量
2. 回调 function

由于钩子本身在 setState 期间没有回调，因此一旦 state 发生更改，我将使用此方法在 useEffect 期间切换回调。

我在 setState 期间传递的回调是打印出 state.number 和 secondNumber 值的值。 在 setState 完成后，state.number 的值应该是 4，secondNumber 应该是 15（测试我是否要在 useEffect 开始时控制台记录它）。

但是 state.callback() 将触发回调 function 仍然打印出原始数字 state.number = 2 和 secondNumber = 10。

我觉得这很奇怪，因为在 state.number 的值之后调用了回调，并且 secondNumber 发生了变化。

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

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

这将来自当前渲染周期的当前state 和secondNumber值包含在存储的回调中。 稍后调用它将使用存储时的值。

解决方案

只需在效果挂钩中执行您想要使用更新的 state 执行的操作。 功能组件 state 更新实际上并没有等效于基于类的组件的setState回调参数，具有适当依赖关系的useEffect是其等效的。

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 ，您可以在每个周期内对其进行变异，但每次都会重置它。