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

我在这里用错了吗？

是的，因为您在循环的第一个步骤后从功能返回。

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

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

为什么不在这里循环？

1 个答案: