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。