Cloudinary 最近的图像正在覆盖屏幕上显示的所有表单图像？答案

【问题标题】：Cloudinary most recent image is overwriting all form images displayed on screen?Cloudinary 最近的图像正在覆盖屏幕上显示的所有表单图像？
【发布时间】：2021-11-19 05:45:54
【问题描述】：

我的 React 应用程序有问题，这是一个简单的表单，允许用户上传他们的图片，然后它会显示在屏幕上，现在当我上传图片时，所有图片都会变成一个最近上传的一个。

应用程序的设置方式：我在一个反应应用程序上进行了完整的 crud 操作，该应用程序将数据存储在状态中并将其保存在 mongodb 中，我在状态对象中添加了一个 url 键，使用 cloudinary 我添加了另一个状态来存储上传的图片。我正在尝试查看是否可以使用来自 cloudinary 的值更新状态 url 键值，因此我只会获得最新上传的图像。

    export default function App() {
  const [state, setState] = useState({
    tracks: [{ track:"",artist:"", album:"", year:"", url:""}],
    newTrack:{
      track:"",
      artist:"",
      album:"",
      year:"",
      url:"",
    },
    editMode: false
  });

const [userState, setUserState] = useState({
  user: null
})

const [image, setImage] = useState('')
    const FormPage = (props) => {

const [imageSelected, setImageSelected] = useState('');

const uploadImage = () => {
    const formData = new FormData()
    formData.append('file', imageSelected)
    formData.append('upload_preset', 'musicimages')

    Axios.post(
        '   https://api.cloudinary.com/v1_1/dklcmfo0q/image/upload', formData)
    .then((res) => {
        props.setImage(res.data.url);
      // console.log(res.data.url)
      })
};

【问题讨论】：

标签： css reactjs image upload cloudinary

【解决方案1】：

请您尝试删除此行的“道具”吗？

props.setImage(res.data.url);

谢谢，莫

【讨论】：

那么它将是未定义的，因为状态（图像，setImage）是在 app.js 中定义的

【解决方案2】：

解决了。将图像 url 从图像状态传递给 handleCHange 函数作为额外参数，然后将图像 url 设置为字符串的状态，就像我在后端 mongodb 模式中一样。它使用 id 存储在 mongodb 中，因此它将匹配表单输入详细信息。有点骄傲，我花了三天时间哈哈

【讨论】：