Question

我有一个React组件：

const Calendar = ({ onEventDrag }) => {
  const [editable, setEditable] = useState(true);

  const eventChange = async event => {
    setEditable(false);
    console.log('before await');
    console.log(editable);
    await onEventDrag(event);
    console.log('after await');
    setEditable(true);
    console.log(editable);
  };

  return (
        <FullCalendar
          editable={editable}
          eventChange={eventChange}
        />
  );
};

onEventDrag是一个async API调用函数，它通过prop传递到此组件。

我想在调用editable函数时将false的状态值设置为eventChange，并且仅在true异步函数返回值时将其设置为onEventDrag。

当前哪个控制台使用此代码登录：

before await
true
after await
true

Answer 1

设置状态是异步操作，因此期望您的两个console.log都将输出true。但是，如果将console.log(editable)放在eventChange之外，则应该在下一个渲染器上看到它正确更新。

Answer 2

首先，您的代码可以正常工作，但控制台会记录旧值。

要了解这种行为，您必须了解闭包在javascript中的工作方式。定义函数时，所有周围的变量都将成为函数“作用域”的一部分。呼叫setEditable()时，以新的状态再次响应呼叫Calendar()。

但是，eventChange函数仍在运行！这不是问题，因为setEditable保持不变。但是，局部变量editable将变得过时，不再代表组件的实际状态。

在异步事件功能中更改状态值

2 个答案: