Reactnative FlatList有时不会在数据更改时重新呈现

我使用react-query来获取React Native中的数据.我有一个通知屏幕.在此屏幕中有两个查询

• UseGrocerNotiments-&gt；返回最近10个通知
• UseGrocerAllNotiments-&gt；返回也包括最近10个通知的所有通知

注意:这些查询具有不同的URL和查询键

默认情况下禁用useGrocerAllNotifications查询.页面中有一个名为Load All的按钮.当用户点击此按钮时，我启用了useGrocerAllNotifications查询并更新了FlatList数据，但有时不会重新呈现.

以下是我的代码

Notifications.tsx个

export function GrocerNotifications() {
  const [isPressedLoadAll, setIsPressedLoadAll] = useState(false)

  const queryClient = useQueryClient()

  const { data, refetch, isFetching } = useGrocerNotifications()
  const {
    data: allData,
    refetch: allRefetch,
    isFetching: isAllFetching
  } = useGrocerAllNotifications({
    enabled: isPressedLoadAll
  })

  const renderData = useMemo(() => {
    if (Array.isArray(allData) && allData.length > 0 && isPressedLoadAll) return allData

    if (Array.isArray(data) && data.length > 0) return data

    return []
  }, [allData, data, isPressedLoadAll])

  const contentContainerStyle = useBottomSafeStyle(styles.contentContainer)

  const handleLoadAllPress = useCallback(() => {
    queryClient.invalidateQueries({ queryKey: ['grocer', 'notifications', 'all'] })

    setIsPressedLoadAll(true)
  }, [queryClient])

  const renderItem: ListRenderItem<GrocerNotificationType> = useCallback(
    ({ item }) => (
      <GrocerNotification
        title={item.title}
        description={item.description}
        date={item.createdDate}
        isNew={!item.isRecieved}
      />
    ),
    []
  )

  const keyExtractor = useCallback(
    (item: GrocerNotificationType) => `grocer_notification_${item.id}`,
    []
  )

  const handleRefresh = useCallback(() => {
    if (isPressedLoadAll) {
      allRefetch()

      return
    }

    refetch()
  }, [refetch, allRefetch, isPressedLoadAll])

  return (
    <FlatList
      data={renderData}
      renderItem={renderItem}
      style={styles.flatList}
      contentContainerStyle={contentContainerStyle}
      keyExtractor={keyExtractor}
      refreshing={isFetching || isAllFetching}
      onRefresh={handleRefresh}
    />
  )
}

数据正在正确更新.我可以在控制台中看到新数据，但它不能反映到FlatList

有点不对劲，但我不知道是什么.

这是控制台日志(log)

old data:
[
  {
    "id": 48,
    "title": "7 kasım aykut 9"
  },
  {
    "id": 47,
    "title": "7 kasım aykut 8"
  },
  {
    "id": 46,
    "title": "7 kasım aykut 7"
  },
  {
    "id": 45,
    "title": "7 kasım aykut 6"
  },
  {
    "id": 44,
    "title": "7 kasım aykut 5"
  },
  {
    "id": 43,
    "title": "7 kasım aykut 4"
  },
  {
    "id": 42,
    "title": "7 kasım aykut 3"
  },
  {
    "id": 41,
    "title": "7 kasım aykut 2"
  },
  {
    "id": 40,
    "title": "7 kasım aykut 1"
  },
  {
    "id": 39,
    "title": "6 kasım aykut 3"
  }
]

new data:
[
  {
    "id": 48,
    "title": "7 kasım aykut 9"
  },
  {
    "id": 47,
    "title": "7 kasım aykut 8"
  },
  {
    "id": 46,
    "title": "7 kasım aykut 7"
  },
  {
    "id": 45,
    "title": "7 kasım aykut 6"
  },
  {
    "id": 44,
    "title": "7 kasım aykut 5"
  },
  {
    "id": 43,
    "title": "7 kasım aykut 4"
  },
  {
    "id": 42,
    "title": "7 kasım aykut 3"
  },
  {
    "id": 41,
    "title": "7 kasım aykut 2"
  },
  {
    "id": 40,
    "title": "7 kasım aykut 1"
  },
  {
    "id": 39,
    "title": "6 kasım aykut 3"
  },
  {
    "id": 38,
    "title": "6 kasım aykut 2"
  },
  {
    "id": 35,
    "title": "6 kasım aykut 1"
  }
]

如您所见，有2个ID为38和35的新项目

但是FlatList keyExtractor的行为很奇怪

这里有keyExtractor根原木

old keyExtractor data:
runs twice on mount I do not know why
{
  "id": 48,
  "title": "7 kasım aykut 9"
}
{
  "id": 47,
  "title": "7 kasım aykut 8"
}
{
  "id": 46,
  "title": "7 kasım aykut 7"
}
{
  "id": 45,
  "title": "7 kasım aykut 6"
}
{
  "id": 44,
  "title": "7 kasım aykut 5"
}
{
  "id": 43,
  "title": "7 kasım aykut 4"
}
{
  "id": 42,
  "title": "7 kasım aykut 3"
}
{
  "id": 41,
  "title": "7 kasım aykut 2"
}
{
  "id": 40,
  "title": "7 kasım aykut 1"
}
{
  "id": 39,
  "title": "6 kasım aykut 3"
}
{
  "id": 48,
  "title": "7 kasım aykut 9"
}
{
  "id": 47,
  "title": "7 kasım aykut 8"
}
{
  "id": 46,
  "title": "7 kasım aykut 7"
}
{
  "id": 45,
  "title": "7 kasım aykut 6"
}
{
  "id": 44,
  "title": "7 kasım aykut 5"
}
{
  "id": 43,
  "title": "7 kasım aykut 4"
}
{
  "id": 42,
  "title": "7 kasım aykut 3"
}
{
  "id": 41,
  "title": "7 kasım aykut 2"
}
{
  "id": 40,
  "title": "7 kasım aykut 1"
}
{
  "id": 39,
  "title": "6 kasım aykut 3"
}

new keyExtractor data:
runs twice too
{
  "id": 48,
  "title": "7 kasım aykut 9"
}
{
  "id": 47,
  "title": "7 kasım aykut 8"
}
{
  "id": 46,
  "title": "7 kasım aykut 7"
}
{
  "id": 45,
  "title": "7 kasım aykut 6"
}
{
  "id": 44,
  "title": "7 kasım aykut 5"
}
{
  "id": 43,
  "title": "7 kasım aykut 4"
}
{
  "id": 42,
  "title": "7 kasım aykut 3"
}
{
  "id": 41,
  "title": "7 kasım aykut 2"
}
{
  "id": 40,
  "title": "7 kasım aykut 1"
}
{
  "id": 39,
  "title": "6 kasım aykut 3"
}
{
  "id": 38,
  "title": "6 kasım aykut 2"
}
{
  "id": 39, -> what happens here. Why does id 39 come again. This should be id 35 according to data
  "title": "6 kasım aykut 3"
}
 after this the data seems to revert back to old one ??
{
  "id": 48,
  "title": "7 kasım aykut 9"
}
{
  "id": 47,
  "title": "7 kasım aykut 8"
}
{
  "id": 46,
  "title": "7 kasım aykut 7"
}
{
  "id": 45,
  "title": "7 kasım aykut 6"
}
{
  "id": 44,
  "title": "7 kasım aykut 5"
}
{
  "id": 43,
  "title": "7 kasım aykut 4"
}
{
  "id": 42,
  "title": "7 kasım aykut 3"
}
{
  "id": 41,
  "title": "7 kasım aykut 2"
}
{
  "id": 40,
  "title": "7 kasım aykut 1"
}
{
  "id": 39,
  "title": "6 kasım aykut 3"
}

我已经try 过这些解决方案

• 加extraDataprops renderData renderData.length allData allData.length isPressedLoadAll
• 获取不带react-query的数据，并将数据保存到一个本地状态

没什么好运气的.FlatList数据有时不会更新.

有人能解释一下这里发生了什么吗？