Javascript 使用钩子响应状态更新

我试图实现一个非常简单的文本区域，用一个按钮删除文本区域的内容

这是我的代码：

import React, { useState } from "react";

const Info = () => {
  const [desc, setDesc] = useState("Lorem, ipsum dolor sit amet consectetur adipisicing elit.");

  return (
    <div>
      <h1>Info</h1>
      <textarea
        className="form-control"
        id="exampleFormControlTextarea1"
        rows="5"
        placeholder="Add description..."
        value={desc}
        onChange={e => setDesc(e.target.value)}
      ></textarea>
      <button
        onClick={() => {
          console.log("BEFORE: ", desc);
          setDesc("");
          console.log("AFTER: ", desc);
        }}
      >
        Delete
      </button>
    </div>
  );
};

export default Info;

第二次我得到：

BEFORE: ""
AFTER: ""

我不明白为什么我第一次不明白：

BEFORE: "Lorem, ipsum dolor sit amet consectetur adipisicing elit."
AFTER: ""

---

这是由于react中的状态更新是异步完成的。只要您的textarea更新正确，您就不必担心任何问题。可能存在重复的

BEFORE: "Lorem, ipsum dolor sit amet consectetur adipisicing elit."
AFTER: ""