reactjsで複数のajax呼び出しを処理する

イメシュチャンドラシリ

私のreactコンポーネントには次のコードがあります。

componentDidMount() {
    getOrganizationsForUserTemp().then((organizations) => {
        this.setState({
            userOrganizations: organizations,
        });
    });

    getUsersOfOrganizationTemp().then((users) => {
        this.setState({
            userOrganizations: users,
        });
    })
}

上記のコードは2つのajax呼び出しを開始し、応答が取得されると、コンポーネントの状態を更新して、コンポーネントを再レンダリングします。

私の問題は、最初の応答を受信するとコンポーネントが完全にレンダリングされ、2番目の応答が来ると以前にレンダリングされたコンポーネントがDOMから消えることです。2番目の応答が状態を更新するとき、前の応答状態への参照はないと思います。

1つのコンポーネントに複数のajax呼び出しを含めることができるように、複数のajax呼び出しを管理するにはどうすればよいですか?私はここで何が間違っているのですか。

Hozefa

両方のajax呼び出しの応答を同じstate変数に保存しているため、この問題に直面しています。

あなたは次のようなことをする必要があります

componentDidMount() {
    getOrganizationsForUserTemp().then((organizations) => {
        this.setState({
            userOrganizations: organizations,
        });
    });

    getUsersOfOrganizationTemp().then((users) => {
        this.setState({
            users: users,
        });
    })
}

organizationsuserは個別の状態変数に格納されます。

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

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

編集
0

コメントを追加

0

関連記事

分類Dev

追跡し、複数のAjax呼び出しを処理する

分類Dev

Angularjsの検索機能で複数のAjax呼び出しを処理する

分類Dev

同じ関数を呼び出す複数のAjax呼び出しを処理する方法は?

分類Dev

同じページで複数のAJAX呼び出しの処理時間を測定する

分類Dev

スレッドで複数のtryLock()呼び出しを処理する

分類Dev

Reactの子で親関数呼び出しを処理する

分類Dev

複数のEnumerable.Zip呼び出しを処理する方法は?

分類Dev

複数のdb呼び出しを処理する非同期タスク

分類Dev

ajax呼び出しでリソースを処理する

分類Dev

rxjs ajax.map 呼び出しで例外を処理する

分類Dev

NodeJSで複数のhttp呼び出しを処理するための最良の方法

分類Dev

nodejs非同期呼び出し、URLで複数のリクエストを処理する方法

分類Dev

手続き型ライブラリ呼び出しで引数の複雑さを処理する方法

分類Dev

C#で複数の非同期メソッド呼び出しを処理する方法

分類Dev

oEventなしで関数の呼び出しを処理する方法

分類Dev

関数の配列からの重複した関数呼び出しを処理する方法は?

分類Dev

1回の呼び出しで複数のajax呼び出し関数を実行する方法

分類Dev

複数のラムダ呼び出しを処理するためのアプローチを提案する

分類Dev

Express:相互に依存する複数のRESTAPI呼び出しの処理

分類Dev

ビューで複数のajax呼び出しを呼び出す方法は?

分類Dev

Ajax呼び出しの応答を作成して処理する方法

分類Dev

Javascript:配列フィルター操作内でjQuery.ajax関数呼び出しを処理する方法は?

分類Dev

Javascript:配列フィルター操作内でjQuery.ajax関数呼び出しを処理する方法は?

分類Dev

すべてのAJAX呼び出しを処理する一般的な方法

分類Dev

複数の順序付けられた目標を持つ並列make呼び出しを処理する方法

分類Dev

jQuery AJAXでAPI呼び出しエラーを処理する方法は?

分類Dev

RxJSで複数のajax呼び出しの圧力を制御する方法

分類Dev

複数のhttp呼び出しを一緒にバッチ処理する方法は?

分類Dev

RxJSを使用してAngularサービスで複数のAPI呼び出しを処理するにはどうすればよいですか?

Related 関連記事

  1. 1

    追跡し、複数のAjax呼び出しを処理する

  2. 2

    Angularjsの検索機能で複数のAjax呼び出しを処理する

  3. 3

    同じ関数を呼び出す複数のAjax呼び出しを処理する方法は?

  4. 4

    同じページで複数のAJAX呼び出しの処理時間を測定する

  5. 5

    スレッドで複数のtryLock()呼び出しを処理する

  6. 6

    Reactの子で親関数呼び出しを処理する

  7. 7

    複数のEnumerable.Zip呼び出しを処理する方法は?

  8. 8

    複数のdb呼び出しを処理する非同期タスク

  9. 9

    ajax呼び出しでリソースを処理する

  10. 10

    rxjs ajax.map 呼び出しで例外を処理する

  11. 11

    NodeJSで複数のhttp呼び出しを処理するための最良の方法

  12. 12

    nodejs非同期呼び出し、URLで複数のリクエストを処理する方法

  13. 13

    手続き型ライブラリ呼び出しで引数の複雑さを処理する方法

  14. 14

    C#で複数の非同期メソッド呼び出しを処理する方法

  15. 15

    oEventなしで関数の呼び出しを処理する方法

  16. 16

    関数の配列からの重複した関数呼び出しを処理する方法は?

  17. 17

    1回の呼び出しで複数のajax呼び出し関数を実行する方法

  18. 18

    複数のラムダ呼び出しを処理するためのアプローチを提案する

  19. 19

    Express:相互に依存する複数のRESTAPI呼び出しの処理

  20. 20

    ビューで複数のajax呼び出しを呼び出す方法は?

  21. 21

    Ajax呼び出しの応答を作成して処理する方法

  22. 22

    Javascript:配列フィルター操作内でjQuery.ajax関数呼び出しを処理する方法は?

  23. 23

    Javascript:配列フィルター操作内でjQuery.ajax関数呼び出しを処理する方法は?

  24. 24

    すべてのAJAX呼び出しを処理する一般的な方法

  25. 25

    複数の順序付けられた目標を持つ並列make呼び出しを処理する方法

  26. 26

    jQuery AJAXでAPI呼び出しエラーを処理する方法は?

  27. 27

    RxJSで複数のajax呼び出しの圧力を制御する方法

  28. 28

    複数のhttp呼び出しを一緒にバッチ処理する方法は?

  29. 29

    RxJSを使用してAngularサービスで複数のAPI呼び出しを処理するにはどうすればよいですか?

ホットタグ

アーカイブ