ReactJS内部的函数多次调用

如何解决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;

日志

    main.jsx:23 Hello world
    main.jsx:28 testuser  Got username from storage  at MainPage
    main.jsx:23 Hello world
    main.jsx:28 testuser  Got username from storage  at MainPage
    main.jsx:23 Hello world
    main.jsx:28 testuser  Got username from storage  at MainPage

1。如何解决此问题？ 2.是否有更好的方法来做await而不是将所有await放在'async'中？ 谢谢！

解决方法

将其放入您的React.useEffect

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

问题出在您的函数在您的第一个渲染中运行之后，它再次更新状态，从而触发了另一个重新渲染，并在那里开始了无限循环。

,

将函数调用bogusFunctionForAsyncOperations()放在useEffect()内

每当您设置状态时，它就会执行