如何在React Native中延迟渲染或在找到数据后进行渲染

发布于 2025-01-16 14:12:11 字数 235 浏览 0 评论 0原文

所以我有一个关于如何在加载数据后在 React Native 中运行渲染的问题来自数据库。在我的代码中，我想列出处方，但它不断给出错误，因为它在执行到达 firebase 并获取处方数据的代码之前尝试在渲染函数中加载处方。我该如何做到这一点，以便在收集 Firebase 数据后进行渲染。

原文

分享到QQ

分享到微博

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

发布评论

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

眼眸 2025-01-23 14:12:11

最简单的方法是在 React 中设置一个 loading 状态，该状态可以默认为 true，一旦从 Firebase 检索到数据，您就可以将其设置为 false。然后，在 jsx 中，您可以在加载状态为 true 时返回加载器或类似的内容，并且仅在 Firebase 数据可用且加载设置为 false 时才渲染依赖于 Firebase 数据的屏幕的其余部分。这是这个概念的最小演示：

https://codesandbox .io/s/great-shockley-i6khsm?file=/src/App.js

import { ActivityIndicator, Text } from "react-native";

const App = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // This is where you would have your Firebase function.
    setTimeout(() => setLoading(false), 5000);
  }, []);

  if (loading) {
    return <ActivityIndicator />;
  }
  return <Text>This is my app showing Firebase data</Text>;
};

export default App;

如果您想进一步阅读并在 Firebase 函数失败时处理潜在的错误状态，那么这是一篇简洁的文章，可以避免具有加载、成功和错误状态的反模式。 https://dev.to/tehaisperlis/the-loading-anti-pattern- 7jj

The easiest way to do this is to just have a loading state in React, this can default to true and once the data has been retrieved from Firebase you set to false. Then in your jsx you can return a loader or similar while the loading state is true and only render the rest of the screen that relies on the Firebase data once it's available and loading is set to false. Here's a minimal demo of this concept:

https://codesandbox.io/s/great-shockley-i6khsm?file=/src/App.js

import { ActivityIndicator, Text } from "react-native";

const App = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // This is where you would have your Firebase function.
    setTimeout(() => setLoading(false), 5000);
  }, []);

  if (loading) {
    return <ActivityIndicator />;
  }
  return <Text>This is my app showing Firebase data</Text>;
};

export default App;

If you want to read a bit further and handle a potential error state if the Firebase function fails then here's a neat article to avoid an anti-pattern having a loading, success and error state. https://dev.to/tehaisperlis/the-loading-anti-pattern-7jj

回复收藏 0 原文

蒲公英的约定 2025-01-23 14:12:11

如果您查看此处的文档 (https://rnfirebase.io/firestore/usage)
这是 get() 示例

import firestore from '@react-native-firebase/firestore';

const users = await firestore().collection('Users').get();
const user = await firestore().collection('Users').doc('ABC').get();

这意味着您必须通过 async/await get() 此数据，因此请在下面执行此操作

useEffect(()=>{
  const fetch = async ()=>{
     /* 
       Your get code here
     */
     const users = await firestore().collection('Users').get();
  }
  // Call fetch
  fetch();

},[])

If you look at the documentation here (https://rnfirebase.io/firestore/usage)
this is there get() example

import firestore from '@react-native-firebase/firestore';

const users = await firestore().collection('Users').get();
const user = await firestore().collection('Users').doc('ABC').get();

This means that you have to get() this data through async/await so do this below

useEffect(()=>{
  const fetch = async ()=>{
     /* 
       Your get code here
     */
     const users = await firestore().collection('Users').get();
  }
  // Call fetch
  fetch();

},[])

回复收藏 0 原文

~没有更多了~