Javascript 更新对象或创建对象（如果不存在）

我正在尝试做一些类似于canva.com的事情，在那里你可以从边栏中选择图像并将它们放在“div”中的任何位置，这样你就可以放很多图像，每个图像都有自己的位置这将在移动鼠标时，按每个像素渲染一个img。

所以问题是，当我拖动鼠标时，我有一个设置鼠标位置的函数，所以当位置改变时，使用effect重新渲染并运行内部函数，我的目标是使用当前img的所有属性设置一个对象（img），当我拖放另一个时，每个img在拖放区域中都有自己的位置

import React, {useState,useEffect} from 'react'
import Img from "./img-card"
 
const  DropImg=()=>{
  //this state is for getImg, with this i save all the images of the input file (sidebar)
  const [img,setImg]=useState([])
  //this state is for the image shown in the editor
  const[imgDrag,setImgDrag]=useState([])
  //this saves the position of the element currently dragged,then it is passed to the state  that has al the objects that contain all the images with its own data and properties.
  const[position,setPosition]=useState({x:0,y:0})
  //this state is for getting the src of the img that is been dragged in the drag zone
  const [imgSelected,setImageSelected]=useState()

  const getImg=(e)=>{
    let img=e.target.files
    for(let i=0;i<img.length;i++){
      setImg((prevState)=>{return  ( img? [...prevState,URL.createObjectURL(img[i])] : [...prevState]) })
    }
  }

 const dragOver=(e)=>{
    e.preventDefault()
    //clientX and clientY are mouse events that show the position of the pointer
    let xPosition=e.clientX
    let yPosition=e.clientY
    //set the positions to later send the data to the imgDrag that has all the data about the images
    setPosition(()=>{return {["x"]:xPosition,["y"]:yPosition}})
  }
  

  
  useEffect(()=>{
    setImgDrag( (prevState)=>{ return [...prevState, {src:imgSelected, x:position.x, y:position.y,...prevState}]})
  },[position])
 
  function drop(e){
    e.preventDefault();
  }
  
  const dragStart=e=>{
    setImageSelected(e.target.src)
  }

  return (
  <div className="flex bg-gray-400">
    <div className=" bg-gray-800 w-1/4 rem-width-25 px-5 pt-6 h-screen">
      <div className="block">
        <div className="relative bg-teal-500 border rounded  py-12 m-auto text-center  w-11/12   text-white ">
          <input type="file"  id="img" className="absolute top-0  m-auto left-0 cursor-pointer bg-gray-200 border border-gray-300 mb-3 outline-none py-10 px-5 rounded shadow-sm opacity-0" multiple onChange={getImg} />
          Click Here  Or Drop An Image 
        </div>
      </div>
      <div className="grid w-full  grid-cols-3 gap-2 mt-10">
        {(img? img.map((src,index)=>{return <Img key={index} id={index} draggable="true" onDragStart={dragStart} src={src}/>}):null)}
      </div>
    </div>
        <div onDrop={drop} onDragOver={dragOver}  className="w-9/12 h-screen relative">
          {imgDrag? imgDrag.map((data)=>{return <Img  src={data.src} style={{width:450,position: 'absolute',top:data.y-400,left:data.x-600}}/>}): null} 
          {img? null:<p id="drop-here" className="text-center">Drop Image Here!</p>}
        </div>
  </div>)
}
export default DropImg

import React，{useState，useffect}来自“React”
从“/Img卡”导入Img
常量DropImg=（）=>{
//此状态用于getImg，使用此状态我保存输入文件的所有图像（侧边栏）
常量[img，setImg]=useState（[]）
//此状态适用于编辑器中显示的图像
const[imgDrag，setImgDrag]=useState（[]
//这将保存当前拖动的元素的位置，然后将其传递到包含所有图像的所有对象及其自身数据和属性的状态。
const[position，setPosition]=useState（{x:0，y:0}）
//此状态用于获取在拖动区域中拖动的img的src
常量[imgSelected，setImageSelected]=useState（）
常量getImg=（e）=>{
让img=e.target.files
for（设i=0；i{
setImageSelected（e.target.src）
}
返回(
单击此处或删除图像
{（img？img.map（（src，index）=>{return}）：null）}
{imgDrag？imgDrag.map（（数据）=>{return}）：null}
{img？null:
把图像放到这里！
}
)
}
导出默认DropImg

以下内容应能解决重复图像问题

 useEffect(()=>{
    setImgDrag( (prevState)=>{ return [...prevState.filter(item => item.src !== imgSelected), {src:imgSelected, x:position.x, y:position.y}] })
  },[position])

---

以下内容应修复重复图像问题

 useEffect(()=>{
    setImgDrag( (prevState)=>{ return [...prevState.filter(item => item.src !== imgSelected), {src:imgSelected, x:position.x, y:position.y}] })
  },[position])