javascript - alternativ till useEffect för react hooks

Först kör jag en GraphQL-fråga och använder sedan dess resultat för att rendera några objekt med FlatList. Detta fungerar bra.

På en annan skärm kör jag en annan mutation med Apollos refetch-alternativ, så att whenever den mutationen är framgångsrik kommer den första förfrågan att hämta data på nytt var den än används. Den delen med att hämta på nytt fungerar bra och jag har testat det på andra skärmar. Så automatiskt uppdateras data i WhiteList.

Men friendList är inte uppdaterad så FlatList uppdateras inte.

Hur kan jag fixa detta? useEffect kunde ha varit ett alternativ men att använda den anpassade GraphQL-hooken inuti den ger mig ogiltigt hook-anrop-fel. Vad mer kan jag göra?

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>
  );
};

Redigera :

Jag försökte också detta men det ger ingenting för tillfället:

 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]);

och detta i huvudreturen istället för FlatList:

 {data && showFlatList}

Försökte också detta men Argument av typen '(DATA: any) => void' kan inte tilldelas till parametern av typen 'EffectCallback'.ts(2345)

     useEffect((DATA: any) => {
        setFriendList(DATA)
      }, [DATA])

Svar #1

Du kan inte använda hook som effektberoende - endast variabler/props/värden.

Du kan använda hook inuti effektfunktionen (kropp).

Om det är en komponent som är beroende av andra (förälders) data/värden - skicka dem som prop och använd i effektberoendet.

Relaterade artiklar