State 没有被 React 的 state 钩子更新？

Question

我正在向我的 Cloudinary 帐户发布图像，并希望从 imageUrl state 中的响应中imageUrl当控制台记录响应 URL 时，它会正确显示 Cloudinary URL，但setImageUrl似乎无法正常工作。

出于安全原因，我已将 Cloudinary 详细信息更改为“虚拟”

import React, { useState } from "react";
import "./image.css";

function Image() {
  const [image, setImage] = useState("");
  const [imageUrl, setImageUrl] = useState("");
  const postDetails = async () => {
    const data = new FormData();
    data.append("file", image);
    data.append("upload_preset", "dummy");
    data.append("cloud_name", "dummy");
    const settings = { method: "POST", body: data };
    try {
      const fetchData = await fetch(
        "https://api.cloudinary.com/v1_1/dummy/image/upload",
        settings
      );
      const resData = await fetchData.json();
      console.log(resData.url);
      if (resData) {
        setImageUrl(resData.url);
        console.log("imageUrl", imageUrl);
      }
    } catch (e) {
      console.log(e);
    }
  };
  return (
    <>
      <div className="file-field input-field">
        <div className="btn #64b5f6 blue darken-1">
          <span>Uplaod Image</span>
          <input type="file" onChange={(e) => setImage(e.target.files[0])} />
        </div>
        <div className="file-path-wrapper">
          <input className="file-path validate" type="text" />
        </div>
      </div>
      <button
        className="btn waves-effect waves-light #64b5f6 blue darken-1"
        onClick={() => postDetails()}
      >
        Submit post
      </button>
    </>
  );
}

export default Image;

Answer 1

我看总的来说逻辑上没有错。 检查if (resData)是否真的是一个true值。 您可以那样做，以更加确定价值!! resdata !! resdata或Boolean (resData) ，但请记住，一个空的 object 或一个空数组将是一个真值。

如果try catch语句中没有错误，并且 restData 是真值，则setImageUrl ()不可能不起作用。

Answer 2

State 更新异步发生，因此当您调用setImageUrl state 更新程序 function 时，state 不会立即更新，首先运行整个postDetails function 然后重新渲染（意味着再次调用）您的功能组件useState钩子将返回imageUrl state 的更新值。

所以你的逻辑是正确的，在下一个渲染中你会得到更新的值，你可以在你的 JSX 中使用它，但是你期望日志会在调用 state 更新程序后立即打印更新的 state 是错误的。

另外，请注意，您不需要像这样创建一个新的 function 将其传递给onClick ： onClick={() => postDetails()} ，您可以像这样简单地传递postDetails function： onClick={postDetails} ，因为您不想将任何 arguments 传递给 function，因此无需创建新的 function。