从React中的Axios返回提取的数据

时间:2018-05-14 13:43:15

标签: reactjs api axios

对使用Axios呈现提取的数据有疑问。我能够将返回的数据记录到控制台,但是,它不会在屏幕上呈现。

我正在使用NPM Bitly模块:https://www.npmjs.com/package/bitly

const BitlyClient = require('bitly');
const bitly = BitlyClient('ACCESS TOKEN');

国家

  class Example extends Component {
    constructor() {
        super();
        this.state = { 
        landing: 'https://www.google.com/',
        newUrl: 'https://www.udacity.com/'
};

API致电

 componentDidMount() {
      bitly.shorten(this.state.landing)
      .then((response) => {
        this.setState({newUrl: response.data.url })
        console.log(response.data.url);
      })
      .catch(function(error) {
        console.error(error);
      });
    }

这会将数据返回到控制台,但不会呈现给页面。

渲染到页面

<Component> {this.newUrl} </>

我错过了什么?

2 个答案:

答案 0 :(得分:0)

应为{this.state.newUrl}

答案 1 :(得分:0)

我一发布这个smh就开始工作了。

我刚刚更新了组件以包含状态。

没用?

<Component> {this.newUrl} </>

工作

<Component> {this.state.newUrl} </>