web-dev-qa-db-ja.com

フェッチAPIの処理方法AJAX response in React

ReactのフェッチAPI、特にcomponentDidMount()関数を使用して、単純なAJAXリクエストを作成しています。

コンソールが結果をログに記録しているように見えるため、機能しています。しかし、私は応答にアクセスする方法がわかりません...

_componentDidMount = () => {

      let URL = 'https://jsonplaceholder.typicode.com/users'

         fetch(URL)
         .then(function(response) {
            let myData = response.json()
            return myData;
         })
         .then(function(json) {
            console.log('parsed json', json)
         })
         .catch(function(ex) {
            console.log('parsing failed', ex)
         })

   } // end componentDidMount
_

Fetchメソッドの外部でmyDataにアクセスしようとしましたが、これは未定義であるというエラーをスローします。したがって、関数のスコープ内でのみアクセスできます。

次にこれを試しました：

_     .then(function(response) {
        let myData = response.json()
        // return myData;
        this.setState({
           data: myData
        })
     })
_

今回はCannot read property 'setState' of undefined(…)を取得します

フェッチ応答を状態、またはグローバル変数に渡すにはどうすればよいですか？

更新

_import React, { Component } from 'react';
import './App.css';

class App extends Component {

   constructor(props) {
      super(props);
      this.state = {
         data: null
      }
   }

   componentDidMount() {
      let URL = 'https://jsonplaceholder.typicode.com/users'  
         fetch(URL)
         .then( (response) => {
            let myData = response.json()
            // return myData;
            this.setState({
               data: myData
            })
         })
         .then( (json) => {
            console.log('parsed json', json)
         })
         .catch( (ex) => {
            console.log('parsing failed', ex)
         })
         console.log(this.state.data)
   } // end componentDidMount

  render() {
    return (
      <div className="App">
         {this.state.data}
      </div>
    );
  }
}

export default App;
_
javascriptjsonreactjsresponsefetch-api
6
Paulos3000

私が見る限り、2つの問題があります。response.json()はpromiseを返すので、myDataをpromiseに設定するのではなく、最初にpromiseを解決してから、データ。

次に、thisはフェッチリクエスト内で同じスコープ内にないため、未定義になります。フェッチ外でthisのスコープを保存してみてください。

var component = this;

fetch(URL)
 .then( (response) => {
    return response.json()    
 })
 .then( (json) => {
    component.setState({
       data: json
    })
    console.log('parsed json', json)
 })
 .catch( (ex) => {
    console.log('parsing failed', ex)
 })
 console.log(this.state.data)
13
StackOverMySoul

矢印関数の代わりに従来の関数構文を使用しているため、setStateは未定義です。矢印関数は「親」関数から「this」キーワードを取り、古典的なfunction（）{}は独自の「this」キーワードを作成します。これを試して

.then(response => {
    let myData = response.json()
    // return myData;
    this.setState({
       data: myData
    })
 })
7
Tomasz Nowak

this.setStateは正しい方向に進んでいますが、応答を処理する関数内でコンポーネントを呼び出すと、thisはコンポーネントのコンテキストに含まれなくなります。 =>関数を使用すると、thisのコンテキストが維持されます。

fetch(URL)
    .then((res) => res.json())
    .then((json) => this.setState({data: json}));
3
Patrick Grimard

関数の代わりに「=>」を使用して応答データにアクセスする方法を変更して、同じコンテキストにします。

componentDidMount = () => {

      let URL = 'https://jsonplaceholder.typicode.com/users'

         fetch(URL)
         .then(function(response) {
            let myData = response.json()
            return myData;
         })
         .then((json) => {
            console.log('parsed json', json)
         })
         .catch(function(ex) {
            console.log('parsing failed', ex)
         })

} // end componentDidMount
1
Ye Yint

REACT NATIVE

import React, { Component } from 'react';

import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native';

export default class SampleApp extends Component {
constructor(props) {
super(props);
this.state = {
    data:  'Request '
    }
}

componentDidMount = () => {
fetch('http://localhost/replymsg.json', {
                      mode: "no-cors",
                      method: "GET",
                      headers: {
                        "Accept": "application/json"
                      },} )
                      .then(response => {
                      if (response.ok) {

                          response.json().then(json => {

                            console.warn( JSON.stringify(json.msg ));
                              this.setState({
                                 data: JSON.stringify(json)
                            })

                        });
                      }
                    }); 

}



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

AppRegistry.registerComponent('SampleApp', () => SampleApp);

JSON FILEファイルreplymsg.jsonを作成し、コンテンツの下に配置します。次のようにローカルホストにホストする必要があります： http：// localhost/replymsg .json

{"status":"200ok","CurrentID":28,"msg":"msg successfully reply"}
1
Brijmohan Karadia

現在のコンテキストをターゲット関数にバインドする必要があります

fetch(URL)
         .then(function(response) {
            return response.json();
         })
         .then(function(json) {
            this.setState({data: json})
         }.bind(this))
         .catch(function(ex) {
            console.log('parsing failed', ex)
         })
0
Floyd