React Native - 如何更新 FlatList 的帖子(新的喜欢，...)

问题描述

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

I am developing a list of posts, which is nested in a flatlist that has a pull to refresh implemented, and each post (rendered in a Card) has the avatar of the user who uploaded it. Also, it is possible for a user to change its avatar, so I need to update the posts FlatList with the new user avatar.

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

I have read something about the ExtraData prop but doesn't work in my case.

// 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 帖子...

What I am doing

When I detect that the user has change its avatar, I modify the data which is passed to the FlatList, changing the avatar uri. I think this is bad, as there can be 100K posts in the list...

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

Also, I need to update the flatlist when new likes, new username, ... So I think this is not viable

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

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

}

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

In the documentation says "By passing extraData to FlatList we make sure FlatList itself will re-render when the state changes.", but for me, this doesn't work, as userData is received via props.

有什么想法吗?谢谢.

推荐答案

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

flatList will render the data and not the extraData. try setting the extraData to a boolean and reverse the boolean value everytime you need to update the list.

这篇关于React Native - 如何更新 FlatList 的帖子(新的喜欢，...)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！