时间戳

首页 > 解决方案 > React Native - 如何更新 FlatList 的帖子（新的喜欢，...）

javascript - React Native - 如何更新 FlatList 的帖子（新的喜欢，...）

问题描述

介绍

我正在开发一个帖子列表，该列表嵌套在一个平面列表中，该列表实现了拉动刷新，并且每个帖子（呈现在卡片中）都有上传它的用户的头像。此外，用户可以更改其头像，因此我需要使用新的用户头像更新帖子 FlatList。

我已经阅读了有关 ExtraData 道具的一些内容，但在我的情况下不起作用。

代码

// Posts Screen
export default function Posts(props) {
   const {
      userData: {
         username,
         avatar
      }
   } = props;

   const [data, setData] = useState([]); // [{ avatar, username, photoUri, likes }, ...]

   let previousAvatar = useRef(avatar).current;

   // ... Fetch the data
 
   // This is the wrong(?) stuff I am doing to update the FlatList
    useEffect(() => {
     if (previousAvatar !== avatar) {
       // For each post, change the avatar
       setPosts(
         posts.map((post) => ({
           ...post,
           avatar: avatar,
         }))
       );

       // Save the new avatar
       previousAvatar = avatar;
     }
   }, [ownerData]);


   return (<FlatList data={data} renderIt... />)
   
}

我在做什么

当我检测到用户已更改其头像时，我会修改传递给 FlatList 的数据，从而更改头像 uri。我认为这很糟糕，因为列表中可能有 100K 帖子......

另外，当新喜欢，新用户名时，我需要更新平面列表......所以我认为这是不可行的

我试过的

// Posts Screen
export default function Posts(props) {
   const {
      userData
   } = props;

   ...
    
   return <FlatList data={data} extraData={userData} ... />

}

在文档中说“通过将 extraData 传递给 FlatList，我们确保 FlatList 本身在状态更改时会重新渲染。”，但对我来说，这不起作用，因为 userData 是通过道具接收的。

有任何想法吗？谢谢你。

标签： javascriptreactjsreact-nativeexpoinfinite-scroll

解决方案

flatList 将呈现数据而不是 extraData。每次需要更新列表时，尝试将 extraData 设置为布尔值并反转布尔值。

推荐阅读