javascript - 为什么不……在这里循环？

我有一个包含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错误吗？

最佳答案

我在这里使用...错误吗？


是的，因为您是在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]}/>);
});

关于javascript - 为什么不……在这里循环？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48238754/