React Native 如何在等待功能之后才重新显示页面

ghhkc1vu 于 2023-02-05 发布在 React

关注(0)|答案(1)|浏览(176)

I具有以下代码..

const WalletScreen = () => {

  const checkBalance = async () => {
    const docRef = doc(db, "users", auth.currentUser.uid);
    const docSnap = await getDoc(docRef);
    let tempBalance;
    if (docSnap.exists()) {
      const notFirstRun = docSnap.data().notFirstRun;
      if (notFirstRun) {
        Wbalance = docSnap.data().WalletBalance;
      } else {
        tempBalance = 1000000;
        await setDoc( docRef,
          { WalletBalance: tempBalance, notFirstRun: true },
          { merge: true }
        ).catch((error) => {
          alert(error.message);
        });
      }
    }
    return tempBalance;
  };
  let displayBalance = checkBalance();

 return (
   <View style={{ backgroundColor: "white", alignItems: "center" }}>
     <Text style={{ fontSize: 42, marginVertical: 30 }}>
       K{(displayBalance / 100)}
     </Text>
   </View>
 );

};
我有一个函数checkbalance，我试图在屏幕上显示一个金额。如果是第一次运行应用程序，余额（存储在tempBalance中）设置为1000000并保存在firestore数据库中，但如果不是第一次运行，余额应该从Firestore中获取。在末尾有一个变量displayBalance，用于显示余额。我想使用异步等待意味着所有这些都将发生在页面呈现之前，但是它显示的NAN就像附件中的照片一样。有人能指出我哪里出错了吗？

react-native

来源：https://stackoverflow.com/questions/75329795/how-to-reder-page-only-after-await-function

1条答案

按热度按时间

ffx8fchx1#

我相信问题来自于你的await语法，它不影响包含你想要暂停的部分的作用域。为了用react的思想来解决这个问题，我使用了useEffect钩子，并且有一个函数，它在初始加载时运行一次，并且改变加载状态来决定要呈现什么。这个想法，根据从数据库接收到的内容呈现不同的状态，或者可以针对您的用例重新调整某些函数的执行。希望这有助于解决你的问题！

const {useState, useEffect} = React;

const AfterAsync = () => {
    const [isLoading, setIsLoading] = useState(true);
    useEffect(() => {
      const wait = new Promise(r => setTimeout(r, 1000));
      wait.then(() => setIsLoading(false));
    }, []);
    
    if (isLoading) return (
      <div> Loading </div>
    );
    return (
        <div> finished loading! </div>
    );
};

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <AfterAsync />
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>

赞(0）回复(0）举报 2023-02-05

我来回答

React Native 如何在等待功能之后才重新显示页面

1条答案

相关问题

热门标签

最新问答