javascript - 如何在 React 中处理获取 API AJAX 响应

Question

我正在使用 React 中的获取 API 发出一个简单的 AJAX 请求，特别是在 componentDidMount() 函数中。

它正在运行，因为控制台似乎正在记录结果。但是，我不知道如何访问响应...

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;

Answer 1

据我所知，你有两个问题，response.json() 返回一个 promise ，所以你不想将 myData 设置为 promise ，而是首先解决 promise ，然后您可以访问您的数据。

其次，this 与您的 fetch 请求不在同一个范围内，所以这就是您未定义的原因，您可以尝试将 this 的范围保存在 fetch 之外:

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)