在 React 中返回从 Axios 获取的数据答案

【问题标题】：Return Fetched Data from Axios in React在 React 中返回从 Axios 获取的数据
【发布时间】：2018-05-14 13:43:14
【问题描述】：

对使用 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} </>

我错过了什么？

【问题讨论】：

标签： reactjs api axios

【解决方案1】：

应该是{this.state.newUrl}。

【讨论】：

谢谢。我在您回复之前发布了问题后立即包含了该状态并且它起作用了。需要学会不跳枪哈哈。感谢您的贡献，非常感谢！

【解决方案2】：

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

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

没用

<Component> {this.newUrl} </>

有效

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

【讨论】：