如何将图片上传接口返回的URL赋值至新增文档接口请求体？

核心原因 #

React的useState是异步更新机制，调用setPhotoUrl后，photoUrl不会立即更新为最新值。如果在上传图片后马上调用新增文档接口，此时photoUrl还是初始的空字符串，就会导致请求参数无效。

解决方案 #

方案1：直接传递上传返回的URL（推荐） #

绕开useState的异步更新限制，上传成功后直接把返回的图片URL传给新增文档请求：

// 上传图片逻辑
try {
  const postFileReq = await axios.post(
    "https://spda-api.onrender.com/api/file/upload",
    formData,
    options
  );
  const postFileRes = postFileReq.data.image;
  if (postFileReq.status === 200) {
    console.log("postFileRes", postFileRes);
    // 直接调用新增文档函数并传入图片URL
    await createDocument(postFileRes);
  }
} catch (error) {
  const err = error as AxiosError;
  console.log(err.response?.data);
}

// 重构新增文档为独立函数，接收photo参数
async function createDocument(photoUrl) {
  try {
    const postDocReq = await axios.post(
      "https://spda-api.onrender.com/api/admin/documents",
      {
        name: field.name,
        location: field.location,
        photo: photoUrl,
      },
      {
        headers: {
          "Content-Type": "application/json",
          authorization: `Bearer ${token}`,
        },
      }
    );
    const postDocRes = postDocReq.data;
    if (postDocReq.status === 200) {
      setShowSnackbar(true);
      router.reload();
      console.log(postDocRes);
    }
  } catch (error) {
    const err = error as AxiosError;
    console.log(err.response?.data);
  }
}

方案2：用useEffect监听状态变化 #

如果必须依赖useState存储URL，通过useEffect监听photoUrl的变化，当它变为有效值时触发新增文档请求：

const [photoUrl, setPhotoUrl] = useState("");
const [shouldCreateDoc, setShouldCreateDoc] = useState(false);

// 上传图片逻辑
try {
  const postFileReq = await axios.post(
    "https://spda-api.onrender.com/api/file/upload",
    formData,
    options
  );
  const postFileRes = postFileReq.data.image;
  if (postFileReq.status === 200) {
    setPhotoUrl(postFileRes);
    setShouldCreateDoc(true); // 标记需要创建文档
    console.log("postFileRes", postFileRes);
  }
} catch (error) {
  const err = error as AxiosError;
  console.log(err.response?.data);
}

// 监听状态变化，触发新增文档
useEffect(() => {
  async function createDocument() {
    if (shouldCreateDoc && photoUrl) {
      try {
        const postDocReq = await axios.post(
          "https://spda-api.onrender.com/api/admin/documents",
          {
            name: field.name,
            location: field.location,
            photo: photoUrl,
          },
          {
            headers: {
              "Content-Type": "application/json",
              authorization: `Bearer ${token}`,
            },
          }
        );
        const postDocRes = postDocReq.data;
        if (postDocReq.status === 200) {
          setShowSnackbar(true);
          router.reload();
          console.log(postDocRes);
        }
        setShouldCreateDoc(false); // 重置标记
      } catch (error) {
        const err = error as AxiosError;
        console.log(err.response?.data);
        setShouldCreateDoc(false);
      }
    }
  }
  createDocument();
}, [photoUrl, shouldCreateDoc, field.name, field.location, token]);

方案3：排查状态重置问题 #

检查代码中是否存在表单重置、组件重新渲染等场景，导致photoUrl被意外重置为空字符串，确保只有在上传成功时才更新该状态。

内容的提问来源于stack exchange，提问作者Muhammad Yafi A