react钩子的useEffect替代

时间:2020-07-02 12:24:42

标签: javascript reactjs typescript react-native graphql

首先,我运行一个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])

1 个答案:

答案 0 :(得分:0)

您不能使用钩子作为效果依赖项-只能使用变量/属性/值。

您可以使用效果器内部的钩子。

如果它是依赖于其他(父代)数据/值的组件,则将它们作为prop传递并有效使用依赖项。