在函数流程尚未完成且setState更新未完成之前，获取最新状态用于调试目的

Question

在 React 中函数流未完成之前是否有机会看到更新的状态以进行调试。

function a = () => {
   ....statements
   setState(a);
   ....statements
   {here can I know what is a value in state before finishing a scope}
}

Answer 1

{在这里我可以知道在完成作用域之前 state 中的值是什么}

如您所知，根据设计，React 致力于批处理。意味着 React 仅在完成正在运行的事件处理程序后才处理状态更新程序。这也意味着事件处理程序中的状态更新程序不会更改其当前值，而只是请求新的渲染。

我们仍然可以推断出新的状态如下：

您的原始代码

function a = () => {
   ....statements
   setState(a);
   ....statements
   {here can I know what is a value in state before finishing a scope}
}

1. 如果上面代码中的 a 是 常量或表达式，那么新的状态值将是 a 本身。

2. 如果a是一个更新函数，那么可以通过传递当前状态值调用相同的更新函数来推导出新值。结果将是新的状态值。

请看下面的代码，演示相同。测试运行的输出也已附上。

App.js

import { useState } from 'react';

export default function App() {

  const [number1, setNumber1] = useState(0);
  const [number2, setNumber2] = useState(1);

  function handleClick(e) {

    setNumber1(number1 + 1);
    setNumber2((number2) => number2 * 10);

    console.log(`Previous render: deduced values`);
    console.log(`number1 : ${number1 + 1} `);
    console.log(`number2 : ${((prevNumber2) => prevNumber2 * 10)(number2)} `);
  }

  return (
    <>
      <label>Latest render : actual values</label>
      <br />
      <label>number1 : {number1}</label>
      <br />
      <label>number2 : {number2}</label>
      <br />
      <button onClick={handleClick}>Change State</button>
    </>
  );
}

试运行结果：

第一次单击“更改状态 - 浏览器和控制台显示”

第二次单击“更改状态 - 浏览器和控制台显示”