Javascript Axios get请求获取所有数据，除非我在.then方法中设置了状态，在这种情况下，数据是不稳定的

所以我的React代码中有一个问题。我有一个父组件来渲染一个子组件，它是一个包含一些横幅图像的容器。在父组件（我们称之为

parent

）中，我向API发出axios GET请求，以获取需要作为道具传递给

子组件的数据

我在
父级
的
组件didmount（）
中进行此调用，该组件还包含一些单独的axios调用

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

这里是我的问题所在：
console.log（offban）
part在注释
this.setState（{banner:offban}）
part时，用4个元素正确地打印我的数组。但是，我的
Child
组件显然不起作用，因为我无法将数据传递给
Child
组件。但是，当我取消注释
this.setState（{mainOfferBanner:offban}）
部分时，我会得到类似这样的结果（现在还不能发布图像）：

如您所见，控制台表示数组的长度为4，但在展开时，GET请求中只有我的4项中的一项，以及内部长度属性，该属性表示1

Child
的render函数被多次调用，并且数组中只有一项位于上面的代码段中，即使控制台显示数组有4个元素。这导致网站上仅显示4个横幅中的一个。我不确定我在这里做错了什么。任何帮助都将不胜感激。谢谢

我使用的是React 15.5.4和Axios 0.16.1

编辑：这是我的整个
家长
的
组件didmount（）
：

以及
父级
的
渲染
功能：

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

由于数组中只有一个项目，因此最终只显示一个图像，即使邮递员请求返回了与预期相同的4个项目。并且，删除
this.setState（{mainOfferBanner:offban}）
使控制台.log
打印出数组中的所有4项
，该数组还包含一些单独的axios调用。
请向我们展示整个代码。我有点困惑；首先显示的代码段与传递给
的内容无关。调用
setState
无法更改
console.log
显示的内容。我不明白你所说的“你没有办法把数据传给孩子”是什么意思，这正是你在做的。另外，.我知道调用
setState
不会影响
console.log
显示的内容，但这正是发生的事情。我在帖子中犯了一个错误：我在
componentDidMount
中调用了所有axios，而不是
componentWillMount
。当我设置state uncommented时，
console.log
数据似乎不稳定，从未显示预期的4个数据项。但是，注释掉它会导致所有数据正确输出到控制台@DaveNewtonI。当您尝试将数组合并到对象中时，您会看到类似的错误。数组键
'0'
作为对象键
console.log
可能无法按预期显示此内容。请尝试
this.setState（{mainOfferBanner:offban.slice（0）}）
以确保您引用的是本机数组。请记住，浏览器在
console中显示。执行console.log时，日志不一定是其中的内容——不同的浏览器以不同的方式处理此问题。您更可能看到的是浏览器实现问题，而不是不可能的行为。
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();
    }

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

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