useState的数组类型

时间:2020-06-26 14:42:04

标签: javascript reactjs typescript react-native react-hooks

在两种情况下,我使用setState来设置对象数组。看起来像这样:

  const [friendList, setFriendList] = useState<any>();

  const _onCompleted = (data: any) => {
    let DATA = data.me.friends.map(
      (item: {
          firstName: string;
          id: number;
          rating: number;
          vehicles: Array<Vehicle>;
          friends: Array<User>;
        
      }) => ({
        id: item.id,
        imageUrl: defaultUrl,
        name: item.firstName,
        rating: item.rating,
        vehicles: [],
        numberOfFriends: item.friends.length,
      }),
    );
    setFriendList(DATA);
  };

在onComplete上,数据如下所示:

DATA
Array (3)
0 {id: 1, imageUrl: "https://", name: "Bob", rating: 1, vehicles: [], …}
1 {id: 3, imageUrl: "https://", name: "Rhena", rating: 3, vehicles: [], …}
2 {id: 4, imageUrl: "https://", name: "Jack", rating: 4, vehicles: [], …}

当前,我正在使用<any>,它可以正常工作。但是,我不想使用any。我尝试创建自定义类型:

type Friend = {
  id: number,
  imageUrl: string,
  name: string,
  rating?: number,
  //vehicles: item.vehicles,
  vehicles?: any,
  numberOfFriends?: number,
};

type FriendList = {
  friendList: Array<Friend>;
};

但是当我像这样useState<FriendList>();使用它时,setFriendList(DATA);onError上出现了一个错误,Argument of type '{ id: string; imageUrl: string; name: string; }[]' is not assignable to parameter of type 'SetStateAction<FriendList | undefined>'.

为什么会这样?我的Friend类型中的其余字段是可选项,那么为什么会出现此错误?

我也尝试使用useState<Array<Friend>>();useState([]),但遇到相同的错误。

2 个答案:

答案 0 :(得分:2)

好像您的friendListFriendlist类型,它是{friendList:Array},而与DATA不同的是Array。有两种解决方法。

  • friendList更改为数组const [friendList, setFriendList] = useState<Array<Friend>>(),并确保设置了let DATA: Array<Friend>
  • 更改调用setFriendList的方式:setFriendList({friendList: DATA})

更新:首选使用Friend[]而不是Array<Friend>的方式:

const [friendList, setFriendList] = useState<Friend[]>();

  const _onCompleted = (data: any) => {
    let DATA: Friend[] = data.me.friends.map(
      (item: {
          firstName: string;
          id: number;
          rating: number;
          vehicles: Array<Vehicle>;
          friends: Array<User>;
        
      }) => ({
        id: item.id,
        imageUrl: defaultUrl,
        name: item.firstName,
        rating: item.rating,
        vehicles: [],
        numberOfFriends: item.friends.length,
      }),
    );
    setFriendList(DATA);
  };

答案 1 :(得分:1)

这应该用于设置类型-

const [friendList, setFriendList] = useState<Array<Friend>>([]);

此外,如果类型中有多个选项,则可以强制转换类型。

setFriendList(DATA as Array<Friend>);