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

8gsdolmq  于 6个月前  发布在  React
关注(0)|答案(1)|浏览(70)

我使用react-queryReact Native中获取数据。我有一个查询屏幕。在这个屏幕中有两个查询

  • useGrocertificate->返回最近10个通知
  • useGrocerAllmenu->返回所有通知,包括最后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"
  }
]

的数据
正如你所看到的,有两个新的项目与id 38和35
但是FlatListkeyExtractor的行为很奇怪
以下是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"
}

的字符串
我试过这些方法

  • 使用renderDatarenderData.lengthallDataallData.lengthisPressedLoadAll添加extraData prop
  • 在不使用react-query的情况下获取数据并将数据保存到一个本地状态

没有运气。FlatList数据有时不更新。
有人能解释一下这里发生了什么吗?

mdfafbf1

mdfafbf11#

我将react-native版本从0.71.7升级到0.72.6。看起来问题已经解决了。

相关问题