为什么即使在更改状态后我的状态值也没有改变？

Question

我正在尝试通过我的 React 组件在 cloudinary 上上传一个文件，然后在成功上传文件时获取它的 url。

这是我的组件：

export default function Write() {
  const [file, setFile] = useState(null)
  const [photo, setPhoto] = useState('')
  const postDetails = () => {
    const data = new FormData()
    data.append('file', file)
    data.append('upload_preset', 'mypresetname')
    data.append('cloud_name', 'mycloudname')
    console.log(photo)
    fetch('https://api.cloudinary.com/v1_1/mycloudname/image/upload', {
      method: 'POST',
      body: data,
    })
      .then((res) => res.json())
      .then((data) => setPhoto(data.url))
      .catch((err) => {
        console.log(err)
      })
  }

  const handleSubmit = async (e) => {
    e.preventDefault()
    postDetails()
  }

return (<form onSubmit={handleSubmit}>
              <input
                type='file'
                name='file'
                onChange={(e) => setFile(e.target.files[0])}
              /> 
    <button type='submit'> Publish </button></form>)}

当我尝试做 .then((data) => console.log(data.url)) 而不是 .then((data) => setPhoto(data.url)) 我得到了 url 正确但是当我做 .then(( data) => (setPhoto(data.url), console.log(photo))) 我得到的照片是空字符串。为什么我已经设置了照片的值？

请帮忙谢谢

Answer 1

setPhoto 不会立即运行，它必须重新运行函数才能使效果可见。尝试将 console.log(photo) 放在 return 语句之前。

为什么即使在更改状态后我的状态值也没有改变？

Why my state value is not changing in react even after changing its state?

javascript

file-upload

cloudinary

reactjs