從React中的Axios返回獲取的數據

Question

有關於使用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} </>

我想念什么？

Answer 1

它應該是{this.state.newUrl} 。

Answer 2

從字面上看，我剛發布此郵件開始工作。

我剛剛更新了組件以包括狀態。

不工作

<Component> {this.newUrl} </>

有用嗎

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