reactjs - Cloudinary 在第一次尝试时返回空 url

Question

奇怪的是，每当我重新启动 ReactJS 并单击 postDetails 时，它总是返回一个空 URL，如果我再次单击它会返回图像的 URL 路径。我在这里的代码中是否遗漏了一些东西。非常感谢并非常感谢。

const Addpost = () => {
    const [photo, setPhoto] = useState("")
    const [photoURL, setPhotoURL] = useState("")

    const postDetails = () => {
        const data = new FormData()
        data.append("file", photo)
        data.append("upload_preset", "xxxxx")
        data.append("cloud_name", "xxxxx")

        fetch("https://api.cloudinary.com/v1_1/xxxxx/image/upload",{
            method: "POST",
            body: data
        })
            .then(res => res.json())
            .then((data) => {       
                setPhotoURL(data.url) 
            })
            .catch(err => {
                console.log(err)
            })
    }

    return (
        <React.Fragment>
            <input
                type="file"
                className="form-control-file"
                id="photo"
                name="photo"
                onChange={(e) => setPhoto(e.target.files[0])}
            />

            <button
                type="submit"
                className="btn btn-primary btn-block"
                onClick={postDetails}
            >
                Submit
            </button>
        </React.Fragment>
    )
}

标签： reactjs

Answer 1

尝试这样做async await（setPhotoUrl()只会在fetch获得某些东西后更新或console.log('No data fetched!')）：-

const postDetails = async() => {
  const data = new FormData()
  data.append("file", photo)
  data.append("upload_preset", "xxxxx")
  data.append("cloud_name", "xxxxx")

  let res = await fetch("https://api.cloudinary.com/v1_1/xxxxx/image/upload",{
    method: "POST",
    body: data
  })
  if(!res) console.log('No data fetched!')

  let data = res.json()
  setPhotoURL(data.url)
}