ScrollView не работает в React Native при динамическом размещении компонентов на основе данных массива

Question

У меня есть массив объектов. Я размещаю контент динамически, используя .map. В моем массиве 6 элементов

Приведенный ниже код не работает должным образом (экран не прокручивается, на экране отображаются только 3 элемента массива)

const items =  data.map(function(orderItem, index) { 
        return <OrdersCard 
            key = {index}
            id = {index}
            name = {orderItem.ProductName}
            volume = {orderItem.ProductVolume}
            amount = {orderItem.ProductAmount}
            details = {orderItem.productDetails}
            onSelectQuantity = {getQuantity} /> }) 

    return (
            <View style = {{flex : 1}}>
                <ScrollView >
                    {items} 
                </ScrollView>    
                <View>
                    <TouchableOpacity 
                        style = {styles.cartButton}
                        onPress={() => ()}> 
                        <View>
                            <Text>Add to Cart</Text>
                        </View>  
                    </TouchableOpacity>
                </View>
            </View>
    );
};

Код работает должным образом когда вместо одного элемента присутствуют два элемента jsx. Элемент загружается только один раз, даже если элементы вызываются дважды.

const items =  data.map(function(orderItem, index) { 
        return <OrdersCard 
            key = {index}
            id = {index}
            name = {orderItem.ProductName}
            volume = {orderItem.ProductVolume}
            amount = {orderItem.ProductAmount}
            details = {orderItem.productDetails}
            onSelectQuantity = {getQuantity} /> }) 

    return (
            <View style = {{flex : 1}}>
                <ScrollView >
                    {items}
                    {items}
                </ScrollView>    
                <View>
                    <TouchableOpacity 
                        style = {styles.cartButton}
                        onPress={() => navigation.navigate('Cart' , {
                        name : name,
                        price : price,
                        cartData : orderData
                    })}> 
                        <View> 
                            <Text>Add to Cart</Text>
                        </View> 
                    </TouchableOpacity>
                </View>
            </View>
    );
};

Это ошибка или я что-то упустил?

Answer 1

Итак, у вас есть 3 элемента, и вы хотите отобразить их дважды. Итак, вы ожидаете увидеть 6 заказов, не так ли?

Здесь ошибка.

<ScrollView>
    <OrdersCard key=0/>
    <OrdersCard key=1/>
    <OrdersCard key=2/>
    <OrdersCard key=0/>
    <OrdersCard key=1/>
    <OrdersCard key=2/>
 </ScrollView>

У вас есть повторяющиеся ключи. Таким образом, будут отображаться только 3 элемента списка.