javascript - 用于反应钩子的 useEffect 的替代品
问题描述
首先,我运行一个 graphql 查询,然后使用它的结果使用FlatList
. 这工作正常。
在另一个屏幕上,我使用 apollos refetch 选项运行另一个突变,这样每当突变成功时,第一个查询将在使用它的地方重新获取数据。重新获取部分工作正常,我已经在其他屏幕上对其进行了测试。因此,data
inWhiteList
会自动更新。
但是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])
解决方案
您不能将钩子用作效果依赖项 - 只能使用变量/道具/值。
您可以使用钩子内部效果函数(主体)。
如果它是依赖于其他(父级)数据/值的组件 - 将它们作为 prop 传递并在效果依赖项中使用。
推荐阅读
- pandas - 比较熊猫系列中连续行的字符串值
- reactjs - 如何访问 FilePond 的方法
- c++ - 如何对stl set中的指针进行排序?
- css - 使css从li高度变为顶部
- php - PHP中除一个目录外的备份服务器文件
- amazon-web-services - 在 ALB 后面的 AWS Lambda 上,lambda not called & 502 error on binary request with "content-type: text/plain"
- javascript - 缺少依赖项时 webpack 缺少 javascript 错误消息
- javascript - 条件表:仅执行第一个条件,其他 2 个条件保持空白
- powershell - 使用 powershell 调用 https api 调用
- python - Python中惯用的文件级注释?