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

Question

Image of Code

所以我有一个问题，关于如何在从数据库加载数据后运行在 React Native 中呈现。在我的代码中，我想列出处方，但在执行到达 firebase 并获取处方数据的代码之前，它会尝试在呈现函数中加载处方时不断出错。我该怎么做才能在收集到 Firebase 数据后进行渲染。

Answer 1

最简单的方法是在 React 中有一个 loading 状态，这可以默认为 true，一旦从 Firebase 检索到数据，您就将其设置为 false。然后在您的 jsx 中，当加载状态为 true 时，您可以 return 加载器或类似的东西，并且仅在 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 函数失败时处理潜在的错误状态，那么这里有一篇简洁的文章可以避免 anti-pattern 出现加载、成功和错误状态。 https://dev.to/tehaisperlis/the-loading-anti-pattern-7jj

Answer 2

如果您查看此处的文档 (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 获取（）此数据，所以请在下面执行此操作

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

},[])

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

How to delay rendering in React Native or make rendering happen after the data is found

rendering

reactjs

mobile-development

react-native