函数内部调用多次的ReactJS

我正在使用Ionic React，并使用插件加载本地数据。我只调用了一次该函数，但它被调用了很多次

Main.jsx

import React ,{useState} from 'react';
import {
    IonApp, 
    IonHeader,
    IonTitle,
    IonToolbar,
    IonContent,
    IonInput,
    IonList,
    IonItem,
    IonLabel,
    IonButton
} from '@ionic/react';
import 'capacitor-secure-storage-plugin';
import { Plugins } from '@capacitor/core';
const { SecureStoragePlugin } = Plugins;


    const MainPage=  () => {
        const [username,setUsername]=useState("h");
        const [token,setToken]=useState("blah");
        const bogusFunctionForAsyncOperations = async () => 
        {   console.log("Hello world");
            let temp;
            let key='username';
            temp=await SecureStoragePlugin.get({ key })
              .then(value => {
                 console.log(value.value," Got username from storage  at MainPage");
                return value;
              })
              .catch(error => {
                console.log('Item with specified key does not exist.');
                return ( "Error at MainPage .The key is "+key);
              });
              setUsername(temp.value);
        }
        bogusFunctionForAsyncOperations();
        return (
            <>
                <p>Hello {username}! </p>
            </>
            );
        };
    export default MainPage;

1.如何解决此问题？ 2.是否有更好的方法来执行

await

而不是将所有

await

放在“异步”中？

---

谢谢

将其放入您的

React.useffect

React.useEffect(() => {
   bogusFunctionForAsyncOperations();
}, []);

---

问题在于，由于函数在第一次渲染中运行，它会再次更新状态，从而触发另一次重新渲染，并在那里启动无限循环。

将此放入

React.useffect

React.useEffect(() => {
   bogusFunctionForAsyncOperations();
}, []);

---

问题在于，由于函数在第一次渲染中运行，它会再次更新状态，从而触发另一次重新渲染，并在那里启动无限循环。

将函数调用

bogusFunctionForAsyncOperations（）

放入

useffect（）

---

此时，每次设置状态时都会执行它

将函数调用

bogusFunctionForAsyncOperations（）

放入

useffect（）

此时，每次设置状态时，它都会被执行