javascript - 为什么不 for ... in 在这里循环？

Question

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

家长:

    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

Am I using for ... in wrong here?

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

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

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]}/>);
});