无法在状态中存储getDownloadUrl

Question

const [values, setValues] = useState({ description: "", postImgUrl: "" });
  const [imgPreview, setImgPreview] = useState();

  const handleChange = (e) => {
    setImgPreview(URL.createObjectURL(e.target.files[0]));
    setFile(e.target.files[0]);
  };

  const sectionStyle = {
    backgroundImage: `url(${imgPreview})`,
  };

  const uploadData = async () => {
    const postImage = ref(storage, `postImages/${user.uid}/${uuidv4()}`);
    uploadBytes(postImage, file).then((snapshot) => {
      getDownloadURL(snapshot.ref).then((url) => {
        console.log("url link", url)
        //setUrlImg(url);
        setValues((prev) => ({ ...prev, postImgUrl: url }));
        console.log(values);
      });
    });

    
  };

我试图将我的图像 src 数据存储在一种状态中，但它显示为空白，当我们控制台 url 时仅显示其显示 url 链接，但控制台值时为空白，我正在使用 firestore 存储来存储图像。

Answer 1

你的代码正在做：

console.log("url link", url)
setValues((prev) => ({ ...prev, postImgUrl: url }));
console.log(values);

但是

useState()

的“设置状态函数”是一个异步函数。 它将把对

setValues(....)

的调用放入异步队列中稍后执行，然后JS将继续执行下一条语句（

console.log(values)

），但

values

不会改变。 它会在组件的当前渲染完成后发生变化。

换句话说，您的代码正在设置该值，但您测试该值的方式不正确......您正在设置发生之前测试该值。 您确实想熟悉 JavaScript（和 React）在异步方面的工作方式。

我强烈鼓励人们多次观看视频JavaScript：了解奇怪的部分：https://www.youtube.com/watch?v=Bv_5Zv5c-Ts&t=1s

特别是关于同步和异步代码执行的部分（时间链接在视频描述中）。

Answer 2

嘿，我们能找到解决方案，因为我在 atm 上遇到了同样的错误