react中利用useState操作泛型数组对象

1.首先声明数组类型

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

2.useState

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

3.业务处理中

特别注意 setcoordinates必须以数组为参数，因此再赋值前，需再定义一个数组A用来push数据，最后再 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)
})