在两种情况下,我使用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([])
,但遇到相同的错误。
答案 0 :(得分:2)
好像您的friendList
是Friendlist
类型,它是{friendList:Array},而与DATA
不同的是Array。有两种解决方法。
friendList
更改为数组const [friendList, setFriendList] = useState<Array<Friend>>()
,并确保设置了let DATA: Array<Friend>
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>);