FlatList 没有向我显示任何结果,为什么?

发布于 2025-01-13 13:15:50 字数 1074 浏览 7 评论 0原文

我正在学习 React Native,我正在尝试在平面列表中显示数据,但它不起作用我不知道为什么这是我的代码:

         <FlatList 
        numColumns={3}
        data={posts}
        horizontal={false}
        renderItem={(item) => 
          <Image 
          style={{width:100, height:100, backgroundColor:"black"}}
          onLoadStart={() => {
            console.log("Loading"); 
          }}
          resizeMode='contain'
          source={{uri: item.imageUri}} />
        }
        />

以及我的数据的代码:

const docRef = doc(db, "posts", auth.currentUser.uid);
        const colRef = collection(docRef, "userPosts");
        const q = query(colRef, orderBy("createAt", "asc"));
        getDocs(q).then((docsSnap) => {

            let posts;

            docsSnap.forEach(doc => {
            // doc.data() is never undefined for query doc snapshots
            const data = doc.data();
            const id = doc.id;
            posts = {id, ...data};
            });              
            ..............the rest of code

为什么它不起作用?

I'm learning react native and i'm trying to show data in flatlist, but it didn't works i don't know why this is my code :

         <FlatList 
        numColumns={3}
        data={posts}
        horizontal={false}
        renderItem={(item) => 
          <Image 
          style={{width:100, height:100, backgroundColor:"black"}}
          onLoadStart={() => {
            console.log("Loading"); 
          }}
          resizeMode='contain'
          source={{uri: item.imageUri}} />
        }
        />

and the code of my data :

const docRef = doc(db, "posts", auth.currentUser.uid);
        const colRef = collection(docRef, "userPosts");
        const q = query(colRef, orderBy("createAt", "asc"));
        getDocs(q).then((docsSnap) => {

            let posts;

            docsSnap.forEach(doc => {
            // doc.data() is never undefined for query doc snapshots
            const data = doc.data();
            const id = doc.id;
            posts = {id, ...data};
            });              
            ..............the rest of code

Why it didn't works please ?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

青萝楚歌 2025-01-20 13:15:50

我不太确定您是否有此错误
当我尝试将平面列表嵌套在 ScrollView 中时,

VirtualizedList 永远不应该嵌套在具有相同方向的普通 ScrollView 中,因为它可能会破坏窗口和其他功能 - 请改用另一个 VirtualizedList 支持的容器。

所以我觉得flatlist和scrollView有冲突,尽量让它水平!
horizo​​ntal={false} 替换为 horizo​​ntal
不过它对我有用!

I am not really sure if you have this error or not
I had this when I am trying to nest flatlist inside a ScrollView,

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

So I think there is a conflict between flatlist and scrollView, try to make it horizontal!
replace horizontal={false} with horizontal
It worked for me though!

牵你的手,一向走下去 2025-01-20 13:15:50

为了触发视图的重新渲染,您必须将帖子放入状态中。请参阅: https://reactnative.dev/docs/state

如果您使用的是功能组件,您只需像这样使用 useState() 钩子:

const [posts, setPosts] = useState()

heredocsSnap.forEach(doc => {
  // doc.data() is never undefined for query doc snapshots
  const data = doc.data();
  const id = doc.id;
  setPosts({id, ...data});
});

In order to trigger a rerender of your view, you must put the posts in the state. See: https://reactnative.dev/docs/state

If you are using functional components you can simply use the useState() hook like this:

const [posts, setPosts] = useState()

heredocsSnap.forEach(doc => {
  // doc.data() is never undefined for query doc snapshots
  const data = doc.data();
  const id = doc.id;
  setPosts({id, ...data});
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文