在React中使用setState的多次提取请求

时间:2018-04-10 12:54:09

标签: javascript reactjs promise fetch

我正在编写一个组件,该组件将对站点的两个不同路径进行提取请求,然后将其状态设置为生成的响应数据。我的代码看起来像这样:

export default class TestBeta extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            recentInfo: [],
            allTimeInfo: []
        };
    }

    componentDidMount(){
        Promise.all([
            fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent'),
            fetch('https://fcctop100.herokuapp.com/api/fccusers/top/alltime')
        ])
        .then(([res1, res2]) => [res1.json(), res2.json()])
        .then(([data1, data2]) => this.setState({
            recentInfo: data1, 
            alltimeInfo: data2
        }));
    }

但是,当我去渲染我的两个状态时,我发现它们实际上仍然是空的,实际上并没有被设置为任何东西。我觉得我可能正在使用Promises或fetch()API错误,或者误解了setState的工作方式,或者是组合的东西。我测试了周围,发现在第一个then()之后,我的data1和data2仍然是Promises由于某种原因,并且还没有成为真正的JSON对象。无论哪种方式,我无法弄清楚我的生活在这里发生了什么。任何帮助或解释将不胜感激

1 个答案:

答案 0 :(得分:9)

export default class TestBeta extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            recentInfo: [],
            allTimeInfo: []
        };
    }

    componentDidMount(){
        Promise.all([
            fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent'),
            fetch('https://fcctop100.herokuapp.com/api/fccusers/top/alltime')
        ])
        .then(([res1, res2]) => Promise.all([res1.json(), res2.json()]))
        .then(([data1, data2]) => this.setState({
            recentInfo: data1, 
            alltimeInfo: data2
        }));
    }

如果你在then处理程序中返回Promise,那么它就会被解析为值。如果你返回任何其他东西(比如你的例子中的Array),它将按原样传递。因此,您需要将您的承诺数组包装到Promise.all以使其成为Promise类型