即使数据存在，在 React 中 axios 调用后数据不显示答案

【问题标题】：Data not displaying after axios call in React even though data exists即使数据存在，在 React 中 axios 调用后数据不显示
【发布时间】：2021-04-17 17:06:30
【问题描述】：

在使用 axios 发出 post 请求并在 Promise 中返回响应后，该信息存在但未显示在 preview 的 .map() 循环中。除非我在浏览器中点击页面；然后图像出现。就好像页面在数据可用之前呈现。我试过useEffect()，但结果是一样的。

const [imageObjects, setImageObjects] = useState([])

const onDrop = useCallback(files => {
        const uploadUrl = process.env.REACT_APP_CLOUDINARY_UPLOAD_URL
        let _imageObjects = imageObjects.length > 0 ? imageObjects : []

        for (let file of files) {
            const fileName = file.name
            const uploadPreset = process.env.REACT_APP_CLOUDINARY_UPLOAD_PRESET
            let data = new FormData()
            data.append('upload_preset', uploadPreset)
            data.append('file', file)
            data.append('multiple', false)

            axios({
                url: uploadUrl,
                method: 'post',
                data,
                withCredentials: false,
                onUploadProgress: (e) => {
                    setProgress(Math.round((e.loaded * 100.0) / e.total))
                }
            }).then(res => {
                const delete_token = res.data.delete_token
                const secure_url = res.data.secure_url
                _imageObjects.push({ delete_token, secure_url })
                setProgress(0)
            }).catch(err => {
                console.log('Error: ', err)
            })
        }
        setImageObjects(_imageObjects)

    })

带有preview ID 的div 的代码在这里：

<div id="preview" style={{ border: '1px solid black', minHeight: "75", display: 'flex', alignItems: 'flex-end' }}>
     {imageObjects && imageObjects.map(img => {
          const delete_token = img.delete_token
          return (
                <span key={img.delete_token}>
                    <Link href="#" onClick={() => deletePhoto(delete_token)}>
                        <img src={img.secure_url} alt={img.secure_url} width="75" height="auto" />
                    </Link>
                 </span>
            )
      })}
 </div>

除非我在浏览器中单击任何位置，否则图像不会出现。我该如何解决？

【问题讨论】：

标签： javascript reactjs axios cloudinary

【解决方案1】：

尝试将setImageObjects 放入then 回调中，并使用扩展语法将新形成的数组传递给setImageObjects。

axios({
    url: uploadUrl,
    method: 'post',
    data,
    withCredentials: false,
    onUploadProgress: (e) => {
        setProgress(Math.round((e.loaded * 100.0) / e.total))
    }
}).then(res => {
    const delete_token = res.data.delete_token
    const secure_url = res.data.secure_url
    setImageObjects([...imageObjects,{
        delete_token,
        secure_url
    })
    setProgress(0)
}).catch(err => {
    console.log('Error: ', err)
})
}

【讨论】：