一旦承诺得到解决，如何加载API数据以响应组件？

Question

我正在尝试创建一个简单的应用程序，该应用程序调用Github 来获取文件并在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组件得到解决的承诺？

我对此反应很新。

Answer 1

看来你说得不对。您需要在getRepos()函数中调用componentDidMount，如下所示：

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