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

Question

我正在尝试创建一个简单的应用程序，它调用 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 组件的已解决 promise ？。
p.s 我是 React 的新手。

Answer 1

看来你没有正确调用它。您需要在 componentDidMount 函数中调用 getRepos()，如下所示:

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