用于反应钩子的 useEffect 的替代品

Posted 2023-03-08

【中文标题】用于反应钩子的 useEffect 的替代品

【英文标题】：alternative of useEffect for react hooks

【发布时间】：2020-10-23 01:09:19

【问题描述】：

首先，我运行一个 graphql 查询，然后使用它的结果使用 FlatList 呈现一些项目。这很好用。

在另一个屏幕上，我使用 apollos refetch 选项运行另一个突变，这样只要该突变成功，第一个查询就会重新获取使用过的数据。重新获取部分工作正常，我已经在其他屏幕上对其进行了测试。因此，WhiteList 中的 data 自动更新。

但是，friendList未更新，因此 FlatList 未更新。

我该如何解决这个问题？ useEffectcould 是一个选项，但在其中使用自定义 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])

【参考方案1】：

您不能将钩子用作效果依赖项 - 只能使用变量/道具/值。

您可以使用钩子内部效果函数（主体）。

如果它是依赖于其他（父级）数据/值的组件 - 将它们作为 prop 传递并在效果依赖项中使用。

【讨论】：

你的意思是我应该在useEffect里面渲染flatList？我试过了，但没有为我工作。你能看到更新的 qs 吗？

我不太明白你的意思。朋友列表依赖于DATA，所以我应该将DATA 作为道具传递并将其用作依赖项？也试过了