API呼び出しでFutureBuilderを使用する際の無限ループ

マンデル

ListViewにAPIの結果を入力しようとしています。API呼び出しは、共有設定から値を取得した後に実行する必要があります。ただし、実行時にAPI呼び出しの関数は無限ループを実行し、UIはレンダリングされません。私はデバッグステートメントを通じてこの動作を追跡しました。

FutureBuilderがUIを構築しているときに表示されるはずの円形インジケーターも表示されません。

どうすればこれを解決できますか?

私のコード:



class _MyHomePageState extends State<MyHomePage>{
  @override MyHomePage get widget => super.widget;

  String userID = "";
  String authID = "";


  //Retrieving values from Shared Preferences

  Future<List<String>> loadData() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();

    List<String> l= new List<String>();

    if(prefs.getString("ID") == null){
      l.add("null");
    }
    else{
      l.add(prefs.getString("ID"));
    }

    if(prefs.getString("authID") == null){
      l.add("null");
    }
    else{
      l.add(prefs.getString("authID"));
    }

    return l;
  }

//Setting values retrieved from Shared Pref
  setData() async{
    await loadData().then((value) {
      setState(() {
        userID = value[0];
        print('the user ID is' + userID);
        authID = value[1];
        print('the authID is' + authID);
      });
     // getAllTasks(userID, authID);
    });
    print("Set data execution completed ");
  }


  //FUNCTION to use values from Shared Pref and make API Call 
  Future<List<Task>> getAllTasks() async{

     await setData();
    //Waiting for Set Data to complete

    print('Ive have retrived the values ' + userID + authID );

    List<Task> taskList;

    await getTasks(userID, authID, "for_me").then((value){

      final json = value;
      if(json!="Error"){

        Tasks tasks = tasksFromJson(json); //of Class Tasks
        taskList = tasks.tasks;  //getting the list of tasks from class
      }
    });

    if(taskList != null) return taskList;
    else {
      print('Tasklist was null ');
      throw new Exception('Failed to load data ');
    }

  }

  @override
  void initState() {
    super.initState();
  }

 @override
  Widget build(BuildContext context){

   _signedOut(){
     widget.onSignedOut();
   }

//To CREATE LIST VIEW 
   Widget createTasksListView(BuildContext context, AsyncSnapshot snapshot) {
     var values = snapshot.data;
     return ListView.builder(
       itemCount: values == null ? 0 : values.length,
       itemBuilder: (BuildContext context, int index) {

         return values.isNotEmpty ? Ink(....
         ) : CircularProgressIndicator();
       },
     );
   }


//MY COLUMN VIEW 

   Column cardsView = Column(
      children: <Widget>[
      ....
        Expanded(
          child: FutureBuilder(
              future: getAllTasks(),
              initialData: [],
              builder: (context, snapshot) {
                return createTasksListView(context, snapshot);
              }),
        ),
      ],
   );


   return Scaffold(

     body:  cardsView,
     );
 }
}

一度呼び出される代わりに...私のsetData関数が繰り返し呼び出されています..これを解決するにはどうすればよいですか..助けてください

グンハン

Futureウィジェットを再構築するたびにオブジェクトを作成します。また、メソッドsetState内で呼び出しsetDataいるため、再帰的に再構築がトリガーされます

この問題を解決するには、Futureオブジェクトへの参照を保持する必要があります。そして、その参照を使用するとFutureBuilder、それが以前に使用されたものであることが理解できます。

例えば:

Future<List<Task>> _tasks;
@override
  void initState() {
    _tasks = getAllTasks();
    super.initState();
  }

そして、ウィジェットツリーで次のように使用します。

Expanded(
          child: FutureBuilder(
              future: _tasks,
              initialData: [],
              builder: (context, snapshot) {
                return createTasksListView(context, snapshot);
              }),
        ),

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

heightForRowAtIndexPathで関数を呼び出している間の無限ループ

分類Dev

関数を呼び出した後、なぜ無限ループに陥るのですか?

分類Dev

REST呼び出しを伴うFlutteronTapは無限ループで終了します

分類Dev

関数を呼び出すときのAngularJSの無限ループの呼び出し?

分類Dev

useEffectを使用してHTTP呼び出しを行うときに無限ループに反応する

分類Dev

ポストでの関数呼び出しを伴う無限ループ

分類Dev

関数を呼び出す角度の無限ループ

分類Dev

自分自身を呼び出すことによるSubMain()の無限ループ?

分類Dev

document.readyはangular.jsを使用して無限ループで呼び出されます

分類Dev

無限ループと無限再帰呼び出しの違いは何ですか?

分類Dev

fork()呼び出しを使用したcプログラムが無限ループを作成しないのはなぜですか?

分類Dev

reactおよびreduxのcomponentDidUpdate()でアクションを呼び出して状態を設定する方法(無限ループを防ぐ)

分類Dev

reactおよびreduxのcomponentDidUpdate()でアクションを呼び出して状態を設定する方法(無限ループを防ぐ)

分類Dev

値を使用して関数を呼び出し、RESTNodejsからデータを取得するときの無限ループ

分類Dev

AngularのHttpInterceptorで実際のhttp呼び出しが行われる前に、別のhttp apiを(インターセプトなしで)呼び出します

分類Dev

microappsNode.jsモジュールを使用してShopifyのAPI呼び出し制限を処理する方法

分類Dev

djangoで外部APIへの呼び出しを制限する方法

分類Dev

forループでのAPI呼び出しを高速化する方法

分類Dev

ServiceNow:コールバック関数でonSubmitを呼び出すと、無限ループが発生します

分類Dev

Python3でビット演算を使用して2つの整数を加算する際の無限ループ

分類Dev

ng-repeat / ng-classが$ httpを呼び出す関数を呼び出すときの無限ループ

分類Dev

os.systemを繰り返し呼び出す無限のwhileループを停止します

分類Dev

無限ループで呼び出されるFirebaseCloud関数

分類Dev

axios呼び出しの無限ループ、React

分類Dev

Angular.js呼び出し関数の無限ループ

分類Dev

再帰呼び出しで無限ループを検出するにはどうすればよいですか?

分類Dev

ベースケースでも再帰関数を呼び出すときの無限ループ

分類Dev

Angular関数が無限ループで呼び出されるのはなぜですか?

分類Dev

myFunc&で呼び出される無限ループ関数を停止する方法

Related 関連記事

  1. 1

    heightForRowAtIndexPathで関数を呼び出している間の無限ループ

  2. 2

    関数を呼び出した後、なぜ無限ループに陥るのですか?

  3. 3

    REST呼び出しを伴うFlutteronTapは無限ループで終了します

  4. 4

    関数を呼び出すときのAngularJSの無限ループの呼び出し?

  5. 5

    useEffectを使用してHTTP呼び出しを行うときに無限ループに反応する

  6. 6

    ポストでの関数呼び出しを伴う無限ループ

  7. 7

    関数を呼び出す角度の無限ループ

  8. 8

    自分自身を呼び出すことによるSubMain()の無限ループ?

  9. 9

    document.readyはangular.jsを使用して無限ループで呼び出されます

  10. 10

    無限ループと無限再帰呼び出しの違いは何ですか?

  11. 11

    fork()呼び出しを使用したcプログラムが無限ループを作成しないのはなぜですか?

  12. 12

    reactおよびreduxのcomponentDidUpdate()でアクションを呼び出して状態を設定する方法(無限ループを防ぐ)

  13. 13

    reactおよびreduxのcomponentDidUpdate()でアクションを呼び出して状態を設定する方法(無限ループを防ぐ)

  14. 14

    値を使用して関数を呼び出し、RESTNodejsからデータを取得するときの無限ループ

  15. 15

    AngularのHttpInterceptorで実際のhttp呼び出しが行われる前に、別のhttp apiを(インターセプトなしで)呼び出します

  16. 16

    microappsNode.jsモジュールを使用してShopifyのAPI呼び出し制限を処理する方法

  17. 17

    djangoで外部APIへの呼び出しを制限する方法

  18. 18

    forループでのAPI呼び出しを高速化する方法

  19. 19

    ServiceNow:コールバック関数でonSubmitを呼び出すと、無限ループが発生します

  20. 20

    Python3でビット演算を使用して2つの整数を加算する際の無限ループ

  21. 21

    ng-repeat / ng-classが$ httpを呼び出す関数を呼び出すときの無限ループ

  22. 22

    os.systemを繰り返し呼び出す無限のwhileループを停止します

  23. 23

    無限ループで呼び出されるFirebaseCloud関数

  24. 24

    axios呼び出しの無限ループ、React

  25. 25

    Angular.js呼び出し関数の無限ループ

  26. 26

    再帰呼び出しで無限ループを検出するにはどうすればよいですか?

  27. 27

    ベースケースでも再帰関数を呼び出すときの無限ループ

  28. 28

    Angular関数が無限ループで呼び出されるのはなぜですか?

  29. 29

    myFunc&で呼び出される無限ループ関数を停止する方法

ホットタグ

アーカイブ