1

これは、魔女がアイテムをフェッチし、20枚のカードごとに広告を挿入するコンポーネントコードです。ページネーションを使用し、ユーザーがリストの一番下に到達すると、カードが既存のデータに追加されます。

// every 20 cards, inject an advertisment
var modulusCount = 0;
if ((this.state.labels.length - modCount) % 20 === 0) {
                    this.state.labels.push({type: 'ad'});
                    modulusCount++;
                }

_renderItem = ({item}) => {
    switch (item.type) {
        case 'label':
            return <Card key={item._id} style={styles.card}>
                <CardTitle title={item.description}/>
                <TouchableOpacity style={styles.image} onPress={() => this._showImage(item.imagepath, item.upvotes, item._id)} activeOpacity={0.7}>
                    <CardImage seperator={false} id={item._id} inColumn={false} source={{uri: item.imagepath}}/>
                </TouchableOpacity>
            </Card>;
        case 'ad':
            return (this.state.fbad && this.state.ads ?
                <View key={item._id}>
                    <Card style={styles.card}>
                        <CardTitle title={'Sponsored'}/>
                        <BannerView
                            placementId={placementId}
                            type="large"
                            style={{width: 100}}
                            onPress={() => console.log('click')}
                            onError={this.onBannerAdError}
                        />
                    </Card>
                </View>
                : null );
        default:
            return null;
    }
};

             <View style={styles.view}>
                    <FlatList
                        data={this.state.labels}
                        keyExtractor={this._keyExtractor}
                        renderItem={this._renderItem}
                        onScroll={this._onScroll}
                        refreshing={this.state.refreshing}
                        onRefresh={this.handleRefresh}
                        onEndReached={this.handleLoadMore}
                        onEndReachedThreshold={0.1}
                        onMomentumScrollBegin={() => {
                            this.onEndReachedCalledDuringMomentum = false;
                        }}
                        removeClippedSubviews={true}
                        ListFooterComponent={this.renderFooter}
                    />
                </View>
            </View>

すべて正常に動作し、広告は 20 アイテムごとに表示されますが、RN はキーについて不平を言っていますWarning: Each child in an array or iterator should have a unique "key" prop.

「広告」タイプのキーで何かが起こっていることは間違いありません。何が間違っていますか? 「広告」タイプのキーを一意にするにはどうすればよいですか? shortid.generate()npm モジュールを追加していくつかのアプローチを試みましたが、配列を押し込むときにキーを挿入し、コンポーネントthis.state.labels.push({key: shortid.generate(), type: 'ad'})に設定しましたが、まったくうまくいきませんでした。key={item.key}Card

4

3 に答える 3