简介
我正在开发一个帖子列表，它嵌套在一个平面列表中，该列表实现了一个拉式刷新，每个帖子(在卡片中呈现(都有上传它的用户的头像。此外，用户可以更改其头像，所以我需要用新的用户头像更新帖子平面列表。
我读过一些关于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。我认为这很糟糕，因为列表中可能有10万个帖子。。。
此外，当新的点赞、新的用户名。。。所以我认为这是不可行的
我尝试过的
// Posts Screen
export default function Posts(props) {
const {
userData
} = props;
...
return <FlatList data={data} extraData={userData} ... />
}
在文件中说"；通过将extraData传递给FlatList，我们确保当状态发生变化时，FlatList本身将重新渲染&"；，但对我来说，这不起作用，因为userData是通过道具接收的。
有什么想法吗？非常感谢。
flatList将呈现数据，而不是extraData。尝试将extraData设置为布尔值，并在每次需要更新列表时反转布尔值。