使用钩子进行状态更新

Question

我正在尝试通过一个按钮删除一个文本区域的内容来实现一个非常简单的文本区域。

这是我的代码：

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;

我正在使用useState钩子为功能组件提供状态，并将其设置为初始值：“ Lorem，ipsum dolor sitet consectetur adipisicing elit。”

在按钮的onClick属性中，我在将状态设置为新值之前和之后添加了console.log（）。

我第一次单击按钮时得到：

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

我第二次得到：

BEFORE: ""
AFTER: ""

我不明白为什么我第一次没有得到这个：

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