为什么不会 for ... 在此处循环？

Question

我有一个包含 N 个对象的变量。对于每个对象，我希望将它们传递给一个子组件 - 因此我们将拥有 N 个具有不同道具的子组件。

家长：

    renderBrandCards() {

        const { marketData } = this.state;

        let i = 0;
        for (const stock in marketData){
            i++;
            return (
                <BrandCard
                    key={i}
                    stock_name={stock}
                    stock_data={marketData[stock]}
                />
            )
        }
   }
   // .... render etc
    return (
        <ScrollView>
            {this.renderBrandCards()}
        </ScrollView>
    )

然而，只有marketDataMap 的第一个对象被传递给BrandCard 组件并被渲染。它不会循环。

我在这里使用for ... in 错了吗？

Answer 1

我在这里用 for ... 错了吗？

是的，因为您是在 for 循环的 first 步骤之后从函数返回的。

您必须创建一个包含所有所需项目的数组，然后只需返回该数组。

let i = 0;
let brandCards = [];
for (const stock in marketData){
        i++;
        brandCards.push(
            <BrandCard
                key={i}
                stock_name={stock}
                stock_data={marketData[stock]}
            />
        )
}
return brandCards;

但我建议您使用 map 方法的另一种方法。

return Object.keys(marketData).map(function(key, i){
     return (<BrandCard key={i} stock_name={key} stock_data={marketData[key]}/>);
});