在Promise.all反应中获取错误

Question

I've been using axios.get for my api requests, but I was testing out how to pull multiple api requests in on componentDidMount. I have been looking this up and using other peoples code, and decided that Promise.all is the way to go. I definitely could be wrong, and don't mind going back to axios for this. Using the axios.spread method was throwing an error, and Promise.all is throwing the same error as well. Any ideads on why this isn't working?

import React from "react";
import ReactDOM from "react-dom";
import axios from 'axios'
import { Table } from './Table'

export class DataList extends React.Component {

    state = {
        articles: [],
        google: []
    }
    componentDidMount() {
        Promise.all([
            ('http://127.0.0.1:8000/api/portblog/'),
            ('http://www.google.com')
        ])
        .then(([res, googleRes]) => {
            this.setState({
                articles: res.data,
                google: googleRes
            })
            console.log(res.data)
        })
    }
    render() {
        return(

            <div>
            <Table key={this.state.articles.id} 
                   articles={this.state.articles} />
            </div>
        )
    }
}
export default DataList

Edit: Error:

DataList.js?a7e0:29 Uncaught TypeError: Cannot read property 'id' of undefined

Answer 1

Try this out. I don't see you sending ajax requests to those URLs.

    Promise.all([
        axios.get('http://127.0.0.1:8000/api/portblog/'),
        axios.get('http://www.google.com')
    ])