使用 useEffect 在 FlatList 中傳遞更新的數據

Question

我運行 graphql 查詢並使用結果呈現一些項目。 這工作正常。 現在在另一個屏幕上，我使用 apollos refetch 選項運行另一個突變，這樣每當運行該突變時，第一個查詢將在每個使用它的地方重新獲取數據。 重新獲取部分工作正常，我已經在其他屏幕上對其進行了測試。

但是，由於我正在做一些映射並使用 setStates，雖然我得到了新數據，但它並沒有傳遞給FlatList ，因此 FlatList 沒有得到更新。 在另一個我不做映射的屏幕上，我只是將data傳遞到FlatList ，它運行良好，但在這里，它沒有。

那么我該如何解決這個問題呢？ 我嘗試使用useEffect但我不知道在里面寫什么。

export const WhitelistBar: React.FC = () => {
  const [friendList, setFriendList] = useState<Friend[]>();
  const [originatorId, setOriginatorId] = useState<number>();

  useEffect(() => {
    //setFriendList(DATA);
    //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>
  );
};

Answer 1

您是否有理由在每次渲染時調用 useGetMyProfileQuery function？

據我所知，您想將 function 調用移動到 useEffect 中，如下所示：

useEffect(() => {
    useGetMyProfileQuery({onCompleted: _onCompleted, onError: _onError});
}, [])

這將在組件掛載時運行一次 useGetMyProfileQuery，類似於 componentDidMount 的工作方式！

不知道這是否是你所追求的！