在React中使用setState的多个获取请求

Z时代
2024-01-10
分类：问答

我正在编写一个组件，该组件将向站点的两个不同路径发出请求，然后将其状态设置为结果响应数据。我的代码如下所示：

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对象。无论哪种方式，我都无法弄清楚我的一生。任何帮助或解释将不胜感激

回答：

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
        }));
    }