javascript - 为什么我需要 setTimeout 来更新 React 组件中的状态

Question

为什么我需要在 React 组件中用 setTimeout 包装 setValue？

这有效

<Button onClick={() => acceptOne()}>
  set value with setTimeout
</Button>

const acceptOne = () => {
  setTimeout(() => {
    setEditMode(false);
  });
};

这不...

<Button onClick={() => acceptTwo()}>
  set value without setTimeout
</Button>

const acceptTwo = () => {
  setEditMode(false);
};

这是一个CodeSandbox example获取演示该问题的完整代码。

我是 React 新手，已经不得不使用 setTimout 来让状态像这样改变。我觉得这很可能是初学者的事情，并且有一些 React 特定的事情我还不明白。这是怎么回事，为什么当我不使用 setTimeout 时 setValue 不起作用？

Answer 1

这是由于事件传播而发生的。如您所见，您已将一个事件绑定(bind)到父 div。因此，每当您单击按钮时，父 div 的事件也会执行。

Why it works with setTimeout?

因为它在div事件之后执行，因为它被推送到其他异步进程并且需要时间来执行。

您可以添加 event.stopPropagation() 来阻止事件在 DOM 中冒泡:

  const acceptOne = e => {
    e.stopPropagation();
    setEditMode(!editMode);
  };

  const acceptTwo = e => {
    e.stopPropagation();
    setEditMode(!editMode);
  };

现在将事件更改为:

onClick={acceptOne}
onClick={acceptTwo}

或者:

onClick={e => acceptOne(e)}
onClick={e => acceptTwo(e)}  

Updated codesandbox