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

1.首先声明数组类型

//声明对象类型
type Coordinates = {
    x: number;
    y: number;
  };
1
2
3
4
5

2.useState

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

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)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16