时间戳

首页 > 解决方案 > 承诺解决后如何加载 API 数据以响应组件？

javascript - 承诺解决后如何加载 API 数据以响应组件？

问题描述

我正在尝试创建一个简单的应用程序，该应用程序调用Github API来获取文件并在CodeMirror组件中显示该文件。代码如下。但是，目前，即使我可以在控制台中记录文件，我也无法在CodeMirror组件中加载文件。它只显示[object Promise].

import React from 'react';
import ReactDOM from 'react-dom';
import CodeMirror from 'react-codemirror'
var createReactClass = require('create-react-class');
require('codemirror/lib/codemirror.css');
var axios = require('axios');

var App = createReactClass({
getInitialState: function() {
    return {
        code: getRepos(),

    };
},
updateCode: function(newCode) {
    this.setState({
        code: newCode,
    });
},
render: function() {
    var options = {
        lineNumbers: true,
        styleSelectedText: true,
    };

    return <CodeMirror value={this.state.code.toString()} onChange={this.updateCode} options={options} />
}
});


async function getRepos(){

var code = await axios.get('https://api.github.com/repos/<.java file>',
    {headers: {
            "Accept" : "application/vnd.github.VERSION.raw"
        }
    })
    .then(response => {
        var codeq = response.data;
        return codeq;
    });

    console.log(code);
    return code;

}

ReactDOM.render(<App/>, document.getElementById('root'));

我应该怎么做才能获得对我的 CodeMirror 组件的已解决承诺？
ps 我对 React 很陌生。

标签： javascriptreactjspromisecodemirror

解决方案

看来您没有正确调用它。您需要像这样调用getRepos()内部componentDidMount函数：

componentDidMount() {
  getRepos().then((res) => this.setState({code: res}))
}

推荐阅读