从url获取json被卡住了

Question

试图从以下网址获取一些json：https://talaikis.com/api/quotes/random/

我正在等待获取json时使用活动指示器。这显然从未发生过，因此应用程序只显示活动指示器。我尝试使用官方反应原生文档中的networking tutorial中提供的示例

这是代码：

import React, { Component } from 'react';
import {AppRegistry, StyleSheet, Text, View, ActivityIndicator} from 'react-native';
import Header from '../header/Header';

export default class SingleQuote extends Component {

constructor(props) {
  super(props);

  this.state = {
    isLoading: true
  }
}

loadingQuoteFromUrl(){
  return fetch('https://talaikis.com/api/quotes/random/')
  .then((response) => response.json())
  .then((responseJson) => {

    this.setState({
      isLoading: false,
      dataSource: responseJson,
    }, function(){

    });

  })
  .catch((error) =>{
    console.error(error);
 });
}

render() {
  var style = require("./styles.js");

  if(this.state.isLoading){
    return(
      <View style={{flex: 1, padding: 20}}>
        <ActivityIndicator/>
      </View>
    )
  }    

  return (
    <View style={style.container}>
      <Header text="Daily Quote" />

      <View style={style.textContainer}>
        <Text
          adjustsFontSizeToFit 
          numberOfLines={3}
          style={style.textStyle}
        > 
          {this.state.dataSource.quote} 
        </Text>

        <Text
          adjustsFontSizeToFit
          numberOfLines={1}
          style={style.textStyle}
        >
          {this.state.dataSource.author}
        </Text>

      </View>
    </View>
  );
}

}

Answer 1

你没有在你的应用程序中的任何地方调用loadingQuoteFromUrl。对于获取操作，componentDidMount是一种合适的生命周期方法。所以，你可以使用它。但首先，您应该绑定此函数以使用this上下文。您可以在构造函数中执行此操作，也可以将其定义为箭头函数而不进行绑定。

class SingleQuote extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: true
    };
    this.loadingQuoteFromUrl = this.loadingQuoteFromUrl.bind(this);
  }

  componentDidMount() {
    this.loadingQuoteFromUrl();
  }

  loadingQuoteFromUrl() {
    return fetch("https://talaikis.com/api/quotes/random/")
      .then(response => response.json())
      .then(responseJson => {
        this.setState(
          {
            isLoading: false,
            dataSource: responseJson
          },
          function() {}
        );
      })
      .catch(error => {
        console.error(error);
      });
  }

  render() {
    if (this.state.isLoading) {
      return <div>Loading...</div>;
    }

    return (
      <div>
        <div>
          <p>{this.state.dataSource.quote}</p>

          <p>{this.state.dataSource.author}</p>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<SingleQuote />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

class SingleQuote extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: true
    };
  }

  componentDidMount() {
    this.loadingQuoteFromUrl();
  }

  loadingQuoteFromUrl = () => {
    return fetch("https://talaikis.com/api/quotes/random/")
      .then(response => response.json())
      .then(responseJson => {
        this.setState(
          {
            isLoading: false,
            dataSource: responseJson
          },
          function() {}
        );
      })
      .catch(error => {
        this.setState(
        {
          isLoading: false,
        }
        console.error(error);
      });
  }

  render() {
    const { isLoading } = this.state;
    const { dataSource } = this.props;

    if (isLoading) {
      return <div>Loading...</div>;
    }

    return (
      <div>
        <div>
          <p>{dataSource.quote}</p>
          <p>{dataSource.author}</p>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<SingleQuote />, document.getElementById("root"));