首先,我运行一个graphql查询,然后使用其结果使用FlatList
渲染某些项目。效果很好。
在另一个屏幕上,我使用apollos refetch 选项运行另一个突变,这样,只要该突变成功,第一个查询将在使用该数据的地方重新提取数据。 refetching部分工作正常,我已经在其他屏幕上对其进行了测试。因此,data
中的WhiteList
是已更新。
但是friendList
未更新,因此 FlatList不会更新。
我该如何解决? useEffect
可能是一个选项,但是在其中使用自定义graphql挂钩会给我invalid hook call
错误。我还能做什么?
export const WhitelistBar: React.FC = () => {
const [friendList, setFriendList] = useState<Friend[]>();
const [originatorId, setOriginatorId] = useState<number>();
useEffect(() => {
//console.log('friendlist', friendList);
}, [useGetMyProfileQuery]);
const _onCompleted = (data) => {
console.log('running', data);
let DATA = data.me.friends.nodes.map(
(item: {
id: number;
firstName: string;
rating: number;
vehicles: Vehicle[];
friends: UserConnection;
}) => ({
id: item.id,
imageUrl: defaultUrl,
name: item.firstName,
rating: item.rating,
vehicles: item.vehicles,
numberOfFriends: item.friends.totalCount,
}),
);
setFriendList(DATA);
console.log('daattaaa', DATA);
setOriginatorId(data.me.id)
};
const _onError = () => {
let DATA = [
{
id: 1,
imageUrl: defaultUrl,
name: 'Friend',
},
{
id: 2,
imageUrl: defaultUrl,
name: 'Friend',
},
{
id: 3,
imageUrl: defaultUrl,
name: 'Friend',
},
];
setFriendList(DATA);
setOriginatorId(0);
};
const { data } = useGetMyProfileQuery({
onCompleted: _onCompleted,
onError: _onError,
});
return (
<View style={scaledStyles.container}>
<View style={scaledStyles.whiteListBarTitle}>
<Text style={scaledStyles.whiteListBarText}>Meine Freunde</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<FlatList
showsHorizontalScrollIndicator={false}
data={friendList}
horizontal={true}
renderItem={({ item }) => (
<WhitelistItem
title={item.name}
face={item.imageUrl}
numberOfFriends={item.numberOfFriends}
vehicles={item.vehicles}
/>
)}
keyExtractor={(item) => item.id.toString()}
/>
</View>
</View>
);
};
编辑:
我也尝试过这个,但这暂时什么也没做:
const showFlatList = (friendList: Friend[] | undefined) => {
return (
<FlatList
showsHorizontalScrollIndicator={false}
data={friendList}
horizontal={true}
scrollEnabled
renderItem={({ item }) => (
<WhitelistItem
title={item.name}
face={item.imageUrl}
firstName={item.name}
rating={item.rating}
numberOfFriends={item.numberOfFriends}
vehicles={item.vehicles}
originatorId={originatorId}
/>
)}
keyExtractor={(item) => item.id.toString()}
/>
);
};
useEffect(() => {
showFlatList(friendList);
}, [useGetMyProfileQuery]);
,这是在主返回列表中,而不是FlatList:
{data && showFlatList}
还尝试了此操作,但Argument of type '(DATA: any) => void' is not assignable to parameter of type 'EffectCallback'.ts(2345)
useEffect((DATA: any) => {
setFriendList(DATA)
}, [DATA])
答案 0 :(得分:0)
您不能使用钩子作为效果依赖项-只能使用变量/属性/值。
您可以使用效果器内部的钩子。
如果它是依赖于其他(父代)数据/值的组件,则将它们作为prop传递并有效使用依赖项。