Reactjs 挂钩 setState - 如何 setState 并等待其实现以及 console.log(newState)

Question

如何使用 console.log(name) 打印新状态“Tom”。 有没有办法可以等待 setName() 完成状态更新，然后打印新名称？ （这也是我在 React 工作面试中一直问到的一个问题，但是 *** 不使用带有 [name] 的 useEffect ***)

export default function SetStateImmediately() {
  const [name, setName] = React.useState("Dan")

  function onBtnClick() {
    setName("Tom")
    console.log(name)   /* I want that "Tom" will be printed and not "Dan" */
  }
  return (
    <div>
      <button onClick={onBtnClick}>press to change name</button>
    </div>
  );
}

我试图等待 setName() 完成，但没有成功...

Answer 1

如果你不想使用 useEffect 你可以记录它的前一个值

像这样：

 function onBtnClick() {
    setName("Tom");
    setName((prevState) => {
      console.log("name : ", prevState);
      return prevState;
    });
  }

不用担心，它不会导致额外的重新渲染

Answer 2

是的，useEffects 在状态设置和 html 水合作用后触发。所以尝试一下：

React.useEffect(() => console.log(name), [name])

在你的组件内

所以发生的事情是：

1. 新状态
2. 新的 html 正在渲染
3. console.log(名称)

Answer 3

这是不可能的。每次组件渲染时都会重新创建

onBtnClick

函数。它从当前渲染周期“捕获”

name

的值。

安装元件时，

name

为

'Dan'

。这意味着当前

name

函数内

onBtnClick

的值将始终为

'Dan'

。

当您将状态设置为

'Tom'

时，React 会对重新渲染进行排队，并且当它重新渲染组件时，它也会重新创建

onBtnClick

函数。在这个渲染周期中，

name

的值变为

'Tom'

。所以现在函数看到

'Tom'

状态的

name

值。

事后记录它的唯一方法是使用

useEffect

钩子。

Answer 4

最简单的方法可能是：

export default function SetStateImmediately() {
  const [name, setName] = React.useState("Dan")
  console.log(name)
  function onBtnClick() {
    setName("Tom")
  }
  return (
    <div>
      <button onClick={onBtnClick}>press to change name</button>
    </div>
  );
}

由于此组件将在此状态更新后再次渲染，因此将其放在函数定义之外也可以。

Answer 5

async function onBtnClick() {
  await  setName("Tom")
    console.log(name)   
  }

你可以试试这个:)