Question

所以我在我的React代码中遇到了问题。我有一个父组件，它呈现一个子组件，这是一个带有几个横幅图像的容器。在父组件中（让我们称之为Parent），我向我的API发出了一个axios GET请求，以获取我需要作为道具传递给Child的数据。

我在Parent＆＃39; s componentDidMount()内拨打此电话，其中还包含一些更独立的axios电话。

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

我的问题出在哪里：console.log(offban)部分在我注释掉this.setState({ banner: offban })部分时，正确地用4个元素打印我的数组。但是，我的Child组件显然不起作用，因为我无法将数据传递给Child组件。但是，当我取消注释this.setState({ mainOfferBanner: offban })部分时，我会得到类似的内容（无法发布图片）：

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

正如您所看到的，控制台说该数组的长度为4，但在扩展时，GET请求中只包含我的4个项目之一，以及内部长度属性，即1。

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

我使用的是React 15.5.4和Axios 0.16.1

编辑：这是我的整个Parent 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();
    }

Parent＆＃39; render功能：

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

Child组件如下所示：

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

这最终仅显示1个图像，因为数组中只有1个项目，即使邮递员请求返回4个预期的项目。并且，删除this.setState({ mainOfferBanner: offban });会导致console.log打印出数组中的所有4个项目

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

0 个答案: