为什么在我的 React Native FlatList 上有具有相同值的键

Question

我并不总是收到有关具有相同值的键的警告，但这种情况经常发生。大多数情况下，它发生在第一次搜索时。

这是我的代码：

const ITEMS_PER_PAGE = 5 
export default class SearchForm extends Component {
    state = {
        allStates: [],
        states: [],
        page: 1,
        displayStatesList: false,
    }
    componentDidMount = async () => {
        await fetch('https://servicodados.ibge.gov.br/api/v1/localidades/estados', {
            method: 'GET',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
            },
        })
        .then(res => res.json())
        .then(res => this.setState({ allStates: res, states: res.slice(0, ITEMS_PER_PAGE -1) })) 
    }
    updateSearch = search => {
        let { allStates } = this.state
        this.setState({ 
            states: allStates.filter(res => res.nome.includes(search)),
            displayStatesList: true,
            search: search,
        })       
    }
    loadMore = () => {
        const { page, states, allStates, search } = this.state
        const start = page*ITEMS_PER_PAGE
        const end = (page+1)*ITEMS_PER_PAGE-1
        const newData = allStates.slice(start, end).filter(res => res.nome.includes(search))
        console.log(allStates.length)
        this.setState({
            states: [...states, ...newData],
            page: page + 1,
        })
    }
    selectItem = (nome) => {
        console.log('press', nome)
        this.setState({
            search: nome,
            displayStatesList: false,
        })
    }
    renderItem = ({ item }) => {
        return (
            <View>
                <ListItem
                    title={item.nome}  
                    onPress={() => this.selectItem(item.nome)}                  
                />
            </View>
        );
    }
    render() {
        const {
            search,
            states,
            displayStatesList,
        } = this.state
        return (
            <View style={styles.container}>
                <SearchBar
                    placeholder="Type Here..."
                    onChangeText={this.updateSearch}
                    value={search}
                    lightTheme
                />
                <View style={styles.listContainer}>
                    {displayStatesList && <FlatList
                        data={states}
                        keyExtractor={item => item.id.toString()}
                        renderItem={this.renderItem}
                        onEndReached={this.loadMore}
                        onEndReachedThreshold={0.7}
                    />}    
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignSelf: 'stretch',
        backgroundColor: '#fff',
    },
    listContainer: {
        height: 200
    },
})

也许我正在做不推荐的事情并且导致错误？或者也许.slice不正确？

观察：如果 API 不起作用，我可以放置一个 json 文件进行测试。

Answer 1

在方法

中添加新数据时，API 响应中可能存在重复loadMore或者从您身边。

您可以尝试更改此keyExtractor={(item,index)=> index.toString()}

并将其作为道具添加到渲染项key={index}的第一个组件中。

这将确保提供给"平面列表"中每个项目的密钥是唯一的。

Answer 2

尝试使用这个方便的函数来确保对象数组中没有重复项。