将axios请求的响应推入数组

时间:2019-03-28 04:20:09

标签: javascript reactjs axios

我一直在努力解决这个问题,需要解决方案的帮助。我在JSON中有一个ID数组,并且正在该数组上进行迭代,并对每个ID进行GET请求。然后,我想将这些GET请求的响应推送到一个数组中。

这是我用来将注册推入数组的功能。它正在遍历一组ID:

getRegistrations = async (event) => {
    let registrations = [];

    await event.registrations.forEach(registration => axios.get('/event/getRegistration', {
        params: {
            id: registration
        }
    }).then(res => {
            registrations.push(res.data.properties)
        }
    ).catch(err => console.log(err)));
    return registrations;
};

在这里我要调用该代码:

render() {
    let event = this.getEvent();
    let registrations2 = [{
        age: 19,
        bio: 'test',
        firstName: 'hello',
        lastName: 'bye',
        password: 'adadas',
        telephone: "4920210213"
    }];
    if (this.props.listOfEvents.events.length !== 0 && !this.props.listOfEvents.gettingList && event) { //check if the array is empty and list has not been rendered yet
        let columns = [];
        let registrations = this.getRegistrations(event);
        console.log(registrations);
        let eventProperties = event.properties[0];
        Object.keys(eventProperties).forEach(key => columns.push({
            title: eventProperties[key].title,
            dataIndex: key,
            key: key
        }));
        console.log(registrations);
        console.log(registrations2);
        return (
            <h1>hi</h1>
        )
    }
    return <Loading/>
}

当我在控制台上登录“ registrations”和“ registrations2”时,它们应该非常相同。但是,在Google Chrome浏览器的JavaScript控制台中,“注册”显示为“ []”,其中“ registrations2”显示为“ [{......]]”。

我知道这是一个与Promise相关的问题(我在实际执行之前要返回注册数组),但是我不知道如何解决它!一些友好的帮助将不胜感激!

3 个答案:

答案 0 :(得分:1)

我推荐Promise.all,它将在所有承诺都解决后解决单个Promise。从技术上讲,异步函数也是promise,因此它将返回promise。

这里是示例。

https://codesandbox.io/s/jzz1ko5l73?fontsize=14

答案 1 :(得分:0)

您需要使用componentDidMount()生命周期方法正确执行并声明状态以存储数据。

constructor (props) {
   super(props);
   this.state = {registrations :[]}
}
componentDidMount () {
    let response = this.getRegistrations()
    this.setState({registrations : response});
}

然后在render方法中访问该状态。从render方法调用api并不是一种好习惯。

答案 2 :(得分:0)

由于 @CucumberOptions( features= {"src/test/resources/Features"}, plugin = {"pretty:STDOUT","html:Reports/cucumber-pretty",**"junit:target/surefire-reports/TEST-TestSuite.xml"**, "com.cucumber.listener.ExtentCucumberFormatter:Reports/Reporting/Quixxi_Report.html"}, monochrome = true, dryRun=false ) 返回了一个承诺,因此您应该在getRegistrations(event)内部对其返回值执行操作。

代替

then

这样做

let registrations = this.getRegistrations(event);
console.log(registrations);