React-Native中的FlatList學習記錄（三）之keyExtractor值不唯一造成的錯誤

React-Native中的FlatList學習記錄（三）之keyExtractor值不唯一造成的錯誤

寫作時間：2021/9/22

React-Native版本：0.63.2

目标平台：Android、iOS

開發過程中遇到的一個錯誤，最後發現是由于資料源有兩個item具有相同的key值，代碼如下

//App.js
'use strict';

import React from 'react';
import List from './demos/demo_1/List';

export default class App extends React.Component {
    render() {
        return (
            <List />
        );
    }
}
           

//List.js
'use strict';

import React from 'react';
import { FlatList, Button, SafeAreaView } from 'react-native';
import Item from './Item';

export default class List extends React.Component {
    constructor() {
        super();

        this.state = {
            list: [
                { number: '11111111', data: { id: '1', name: 'aaa', age: 11 } },
                { number: '22222222', data: { id: '1', name: 'bbb', age: 22 } },
                { number: '33333333', data: { id: '3', name: 'ccc', age: 33 } },
            ],
        };
    }

    render() {
        return (
            <SafeAreaView>
                <Button title={'button'} onPress={this.onButtonPress} />
                <FlatList data={this.state.list} renderItem={this.renderItem} keyExtractor={this.keyExtractor} />
            </SafeAreaView>
        );
    }

    renderItem = ({ item }) => {
        return <Item itemData={item} />;
    };

    keyExtractor = (item) => item.data.id;

    onButtonPress = () => {
        this.setState({
            list: [
                { number: '44444444', data: { id: '4', name: 'ddd', age: 44 } },
                { number: '55555555', data: { id: '5', name: 'eee', age: 55 } },
            ],
        });
    };
}
           

//Item.js
'use strict';

import React from 'react';
import { Text } from 'react-native';

export default class Item extends React.Component {
    render() {
        return <Text>{this.props.itemData.data.name}</Text>;
    }
}

           

根據代碼不難看出，對清單資料進行了替換，希望替換之後的展示資料由3項變為2項，但實際現象如下

點選前

點選後

記錄一下，以後開發過程中需要避免出現類似情況