FlatList 有时不会在数据更改时重新渲染

Question

我正在使用

react-query

在

React Native

中获取数据。我有一个通知屏幕。在这个屏幕中有两个查询

• useGrocerNotifications -> 返回最后 10 条通知
• useGrocerAllNotifications -> 返回所有通知，包括最后 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

有问题，但我不知道是什么问题。

这是控制台日志

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"
}

我已经尝试过这些解决方案

• 添加

  extraData

  属性

  renderData

  renderData.length

  allData

  allData.length

  isPressedLoadAll

• 无需

  react-query

  即可获取数据并将数据保存到一个本地状态

没有运气。 FlatList 数据有时不更新。

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

Answer 1

也许你需要看看

extraData

的

FlatList

属性？

请参阅此处的文档：https://reactnative.dev/docs/flatlist#extradata

基本上，这是一种告诉

FlatList

“嘿，一些数据已更改，请重新渲染”的方式。