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

Posted 2023-03-25

【中文标题】Cloudinary 最近的图像正在覆盖屏幕上显示的所有表单图像？

【英文标题】：Cloudinary most recent image is overwriting all form images displayed on screen?

【发布时间】：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)
      )
;

【参考方案1】：

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

props.setImage(res.data.url);

谢谢， 莫

【讨论】：

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

【参考方案2】：

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