从 fetch 中反应 setState 并将其发送到另一个 fetch

Question

我有一个调用 2 个函数的函数，一个上传图像并将其存储在某个目录中，另一个发送产品相关数据以在数据库中编辑/存储：

  const uploadImage = async () => {
    let formData = new FormData();
    formData.append("image", product.image);

    const res = await fetch("http://localhost:8000/api/upload", {
      method: "POST",
      body: formData,
    });
    const data = await res.json();
    setProduct({...product,path: data.data.path});
  };

  const saveProduct = async () => {

    if (product.id) {
      await fetch("http://localhost:8000/api/edit-product", {
        method: "PUT",
        body: JSON.stringify(product),
        headers: { "Content-Type": "application/json" },
      });

    } else {
      fetch("http://localhost:8000/api/new-product", {
        method: "POST",
        body: JSON.stringify(product),
        headers: { "Content-Type": "application/json" },
      })
    }

  };

  const saveProductMain = () => {
    uploadImage();
    saveProduct();

  };

当调用

saveProductMain

时，它会调用

uploadImage

，它会获取上传图像路径的响应，然后设置状态

product.path

，现在我想将该路径发送到

/new-product

，以便我可以接收路径在route方法中，然后将其存储到数据库中，但是当我在

console.log

函数中

product.path

状态

saveProduct

时，它只会在第二次调用该函数时返回值，第一次返回

null 

，所以

product.path

在获取正文中发送时为空，我该如何解决这个问题？

Answer 1

状态更新直到下一次渲染才会生效，这就是为什么它只在第二次单击时起作用。当您调用第二个函数时，状态中的

product

永远无法更新。

一个简单的替代方案是让第一个函数返回乘积并在第二个函数中直接使用该值。您可以将

product

从状态中完全删除，但如果您仍然需要它处于状态中，则可以将其保留。

示例：

  const uploadImage = async () => {
    let formData = new FormData();
    formData.append("image", product.image);

    const res = await fetch("http://localhost:8000/api/upload", {
      method: "POST",
      body: formData,
    });
    const data = await res.json();

    // You may be able to delete this line if not needed else ware in your code.
    setProduct({...product,path: data.data.path});

    return {...product,path: data.data.path};
  };

  const saveProduct = async (product) => {

    if (product.id) {
      await fetch("http://localhost:8000/api/edit-product", {
        method: "PUT",
        body: JSON.stringify(product),
        headers: { "Content-Type": "application/json" },
      });

    } else {
      fetch("http://localhost:8000/api/new-product", {
        method: "POST",
        body: JSON.stringify(product),
        headers: { "Content-Type": "application/json" },
      })
    }

  };

  const saveProductMain = async () => {
    const product = await uploadImage();
    saveProduct(product);
  };

由于

uploadImage

是异步的，因此您还需要使保存函数异步，以便您可以等待 uploadImage 调用。