React Nativeでサーバーからデータをロードする方法は？

サーバーからデータを読み込むには、 fetch APIを利用できます。 これはXMLHttpRequestに似ています またはその他のネットワークAPI。

フェッチを使用してサーバーにリクエストを送信するのは非常に簡単です。次のコードを見てください-

fetch('https://jsonplaceholder.typicode.com/posts/1')
   .then((response) => response.json())
   .then((responseJson) => console.log(responseJson));

上記のコードでは、JSONファイルhttps://jsonplaceholder.typicode.com/posts/1をフェッチし、データをコンソールに出力しています。 fetch（）APIの最も単純な呼び出しは、1つの引数、つまりフェッチするパスを取り、応答付きのPromiseを返します。

fetch apiは、json（）メソッドを使用するために必要な応答からJSON本体を取得するために、http応答でpromiseを返します。

フェッチAPIの2番目のパラメーターは、メソッド（GET、POST）、ヘッダー、投稿するデータなどを持つことができるオブジェクトです。

これは、サーバーからデータを取得してユーザーに表示する方法を示す実用的な例です。

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

以下に示すように、データは開始時に空に初期化されます-

state = {
   data: ''
}

componentDidMount（）に関する詳細

フェッチAPIは、componentDidMount（）関数内で呼び出されます。 componentDidMount（）は、コンポーネントがマウントされた直後、つまりすべての要素がページにレンダリングされた後に呼び出されます。

これが同じ-

componentDidMount = () => {
   fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'GET'
   })
   .then((response) => response.json())
   .then((responseJson) => {
      console.log(responseJson);
      this.setState({
         data: responseJson
      })
   })
   .catch((error) => {
      console.error(error);
   });
}

URLからのデータ：https：//jsonplaceholder.typicode.com/posts/1は次のとおりです-

{
   "userId": 1,
   "id": 1,
   "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
   "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

本文内にテキストを表示することに関心があります。

データ変数は、以下に示すようにsetStateメソッドを使用して更新されます-

this.setState({
   data: responseJson
})

これで、this.state.data.bodyには、以下に示すようにユーザーに表示するために使用できるサーバーからのデータが含まれます-

render() {
   return (
      <View>
         <Text>
            {this.state.data.body}
         </Text>
      </View>
   )
}

フェッチAPIを使用してサーバーからデータを取得するための作業コードは次のとおりです-

import React, { Component } from "react";
import { Text, View } from "react-native";
class HttpExample extends Component {
   state = {
      data: ''
   }
   componentDidMount = () => { fetch('https://jsonplaceholder.typicode.com/posts/1', {
      method: 'GET'
   })
   .then((response) => response.json())
   .then((responseJson) => {
      console.log(responseJson);
      this.setState({
         data: responseJson
      })
   })
   .catch((error) => {
      console.error(error);
   });
}
render() {
   return (
      <View>
         <Text>
            {this.state.data.body}
            </Text>
         </View>
      )
   }
}
const App = () => {
   return (
      <HttpExample />
   )
}
export default App

出力