Axios get request gets all the data, unless I set state in the .then method in which case the data is erratic

问题

So I'm having an issue in my React code. I have a parent component that renders a child component, which is a container with a few banner images. In the parent component (let's call it Parent), I make an axios GET request to my API to fetch the data I need to pass as props to Child.

I make this call inside the Parent's componentDidMount(), which also houses some more separate axios calls.

axios.get(`${config.host.api}/banners`).then(res => {
    let offban = res.data.trend;
    console.log(offban)
    this.setState({ mainOfferBanner: offban });
});

Here's where my problem lies: the console.log(offban) part prints my array correctly with 4 elements when I comment out the this.setState({ banner: offban }) part. However, my Child component obviously does not work because I have no way of passing the data to the Child component. However, when I uncomment the this.setState({ mainOfferBanner: offban }) part, I get something like this (can't post images yet):

(4) [{…}, {…}, {…}, {…}]
0: {...}
length: 1
__proto__: Array(0)

As you can see, the console says that the array is of length 4, but on expanding there is just one of my 4 items from the GET request, as well as the inner length property which says 1.

The Child's render function gets called multiple times and there is only one item in the array which is in the snippet above, even though the console shows that the array has 4 elements. This causes only one of the 4 banners to be shown on the website. I am not sure what I am doing wrong here. Any help would be appreciated. Thanks!

I'm using React 15.5.4 and Axios 0.16.1

EDIT: Here's my entire Parent's componentDidMount():

componentDidMount() {
        axios.get(`${config.host.gen}/products/trending`)
            .then(res => {
                const products = res.data.trending;
                const deals = res.data.deals;
                this.setState({products, deals});
            });


        axios.get(`${config.host.gen}/banners/mh/1`)
            .then(res => {
                const banners = res.data;
                this.setState({banners});
            });

        axios.get(`${config.host.api}/products/offer/card_main`)
            .then(res => {
                let offban = res.data.trend;
                console.log(offban)
                this.setState({ mainOfferBanner: offban });
            });

        this.fetchBanner();
    }

And the Parent's render function:

render() {
    const {..., mainOfferBanner} = this.state
    return (
        ...
        <Child mainOffer={mainOfferBanner} />
        ...
    )
}

And the Child component looks like:

class Child extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        if (this.props.mainOffer && this.props.mainOffer.length > 0) {
            return (
                <div>
                    {this.props.mainOffer.map((item, idx) => {
                        return (
                            <div>
                                <img src={item.img_hash} />
                            </div>
                        )
                     })}
                </div>
        } else {
            return null;
        }
     }
}

This ends up showing only 1 image since there is just 1 item in the array, even though the postman request returns 4 items like intended. And, removing the this.setState({ mainOfferBanner: offban }); causes the console.log to print out all 4 items in an array

来源：https://stackoverflow.com/questions/50888496/axios-get-request-gets-all-the-data-unless-i-set-state-in-the-then-method-in-w