Verwenden Sie useState, um generische Array-Objekte in React zu manipulieren

1. Deklarieren Sie zunächst den Array-Typ

//声明对象类型
type Coordinates = {
    
    
    x: number;
    y: number;
  };

2.useState

//coordinates为一个数组，里面包含多个Coordinates对象
 const [coordinates, setcoordinates] = useState<Coordinates[]>([]);

3. Geschäftsabwicklung

Achten Sie besonders darauf, dass setcoordinates ein Array als Parameter annehmen muss. Bevor Sie also einen Wert zuweisen, müssen Sie ein Array A definieren, um Daten zu übertragen, und schließlich setcoordinates(A)

 var xs = e.pixel[0];
 var ys = e.pixel[1];
 let coordinatesArry = [];
 //向coordinatesArry中pushCoordinates对象，此处只有一个
 coordinatesArry.push({
    
    
      x:xs
      y:ys
});
//然后将coordinatesArry数组更新到coordinates数组状态中
 setcoordinates(coordinatesArry);
 //使用时
 coordinates.map((ele)=>{
    
    //coordinates数组中由多个Coordinates对象，ele等于每个Coordinates对象
   //取出Coordinates对象中的属性
   console.log(ele.x)
   console.log(ele.y)
})