Reactjs-サーバーからデータを取得して更新する

エリクベ

(reactjs初心者はこちら)...

私はReactjsを使用して、自分が持っているページを作成しています

  • シンプルな検索ボックス
  • ユーザーが検索テキストを入力する
  • データはサーバーからフェッチされて表示されます

現在、「searchText」と「data」は私の状態であり、サーバーからデータを受信した後でのみ「結果」を更新する方法を見つけようとしています。

ユーザーが検索テキストとして何かを入力するたびに処理するイベントがあります

    handleUserInput: function(searchText) {
      this.loadDataFromServer(searchText);

      this.setState({
        searchText: searchText,
      });
    },

しかし、上記の関数を使用すると、次のことが起こります

  1. 初期データが読み込まれます
  2. ユーザーが何かを入力する
  3. 結果はすぐに更新され、検索テキスト(以下のコード)を含む結果のみが表示されますが、同時に、結果に検索テキストが含まれる結果をフェッチするようにサーバーに要求されます。

    this.props.products.forEach(function(product){if(product.name.toLowerCase()。indexOf(this.props.searchText)> -1){row = rows.push(row)}} .bind(this ));

  4. 約1秒後、サーバーから新しいデータが受信され、結果が再度更新されます。

明らかに私がやりたいのは

  1. 初期データをロードする
  2. ユーザータイプ検索テキスト
  3. サーバーにデータを要求する
  4. サーバーからデータを受信する
  5. 結果を更新する

これを達成するための適切な方法は何ですか?

ダグラス

それで、あなたが正しく止めたいのはちょうど最初のリフレッシュですか?

結果がサーバーから取得された後ですでに更新されている場合は、手順3でクライアントで結果をフィルター処理するだけではないようです。その場合、最初と同じ仮想DOMが生成されるため、結果はlistは、サーバーが応答したときにのみ実際のDOMを更新します。

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

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

編集
0

コメントを追加

0

関連記事

分類Dev

ReactJS-jQueryを使用してサーバーからデータをロードする

分類Dev

reactjsとexpressを使用してサーバーからデータを取得できません

分類Dev

Axiosを使用してReactjsでApiからデータを取得する

分類Dev

ReactJS を使用して配列内の配列からデータを取得する

分類Dev

サーバーから取得したデータが ReactJS に表示されない

分類Dev

'url'属性を使用すると、ReactJSがサーバーからデータをフェッチしない

分類Dev

reactjsを使用してテーブルのAPIから取得したデータを表示する方法

分類Dev

ReactJsはaxiosAPIデータから状態を更新します

分類Dev

ReactJs:redux-storeからデータを取得します

分類Dev

ReactJSでJSONからデータを取得する際の問題

分類Dev

サーバーから送信されるreactjsでJWTCookieを取得する方法

分類Dev

ReactJSはAPIからユーザーデータを取得してテーブルに追加します

分類Dev

ReactJS:APIとマップデータからデータを取得します

分類Dev

Reactjs APIから取得した配列データを表示する方法は?

分類Dev

reactjsの「ルート」DOMノードからデータ属性を取得します

分類Dev

reactjsの「ルート」DOMノードからデータ属性を取得します

分類Dev

ReactJS)PHPからXMLHttpRequestを使用してデータを取得し、そのデータを兄弟コンポーネント内にレンダリングする方法

分類Dev

javascript配列オブジェクト/ JSONからデータを取得してReactJSで使用する方法

分類Dev

ReactJS-レンダリングされたテーブルの行からデータを取得してデータを編集する

分類Dev

Reactjs Reduxは、入力を使用して状態/ストアからデータ値を更新します

分類Dev

ReactJsのAPIから配列のデータを取得したい

分類Dev

ExpressJSを使用して本番サーバーにReactJSアプリを起動してデプロイする方法がわからない

分類Dev

フェッチAPI呼び出しを使用して取得したデータでReactjs状態を更新するにはどうすればよいですか?

分類Dev

ReactJSでpromiseオブジェクトからデータを取得する方法

分類Dev

ReactJSでフェッチを使用してAPIデータを取得する

分類Dev

ReactJSを使用してこのAPIデータを取得するにはどうすればよいですか

分類Dev

Promiseオブジェクトからデータを取得し、ReactJSを使用してHTMLリストに入れるにはどうすればよいですか?

分類Dev

検索からパラメータを取得するReactjs

分類Dev

getJSONからReactJS状態にデータをバインドする方法

Related 関連記事

  1. 1

    ReactJS-jQueryを使用してサーバーからデータをロードする

  2. 2

    reactjsとexpressを使用してサーバーからデータを取得できません

  3. 3

    Axiosを使用してReactjsでApiからデータを取得する

  4. 4

    ReactJS を使用して配列内の配列からデータを取得する

  5. 5

    サーバーから取得したデータが ReactJS に表示されない

  6. 6

    'url'属性を使用すると、ReactJSがサーバーからデータをフェッチしない

  7. 7

    reactjsを使用してテーブルのAPIから取得したデータを表示する方法

  8. 8

    ReactJsはaxiosAPIデータから状態を更新します

  9. 9

    ReactJs:redux-storeからデータを取得します

  10. 10

    ReactJSでJSONからデータを取得する際の問題

  11. 11

    サーバーから送信されるreactjsでJWTCookieを取得する方法

  12. 12

    ReactJSはAPIからユーザーデータを取得してテーブルに追加します

  13. 13

    ReactJS:APIとマップデータからデータを取得します

  14. 14

    Reactjs APIから取得した配列データを表示する方法は?

  15. 15

    reactjsの「ルート」DOMノードからデータ属性を取得します

  16. 16

    reactjsの「ルート」DOMノードからデータ属性を取得します

  17. 17

    ReactJS)PHPからXMLHttpRequestを使用してデータを取得し、そのデータを兄弟コンポーネント内にレンダリングする方法

  18. 18

    javascript配列オブジェクト/ JSONからデータを取得してReactJSで使用する方法

  19. 19

    ReactJS-レンダリングされたテーブルの行からデータを取得してデータを編集する

  20. 20

    Reactjs Reduxは、入力を使用して状態/ストアからデータ値を更新します

  21. 21

    ReactJsのAPIから配列のデータを取得したい

  22. 22

    ExpressJSを使用して本番サーバーにReactJSアプリを起動してデプロイする方法がわからない

  23. 23

    フェッチAPI呼び出しを使用して取得したデータでReactjs状態を更新するにはどうすればよいですか?

  24. 24

    ReactJSでpromiseオブジェクトからデータを取得する方法

  25. 25

    ReactJSでフェッチを使用してAPIデータを取得する

  26. 26

    ReactJSを使用してこのAPIデータを取得するにはどうすればよいですか

  27. 27

    Promiseオブジェクトからデータを取得し、ReactJSを使用してHTMLリストに入れるにはどうすればよいですか?

  28. 28

    検索からパラメータを取得するReactjs

  29. 29

    getJSONからReactJS状態にデータをバインドする方法

ホットタグ

アーカイブ