Почему в моем React Native FlatList есть ключи с одинаковым значением? - PullRequest
Новая
       10

Почему в моем React Native FlatList есть ключи с одинаковым значением?

0 голосов
/ 29 января 2019

Не всегда я получаю это предупреждение о ключах с одинаковым значением, но это часто.В большинстве случаев это происходит при первом поиске.

Вот мой код: 

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 для тестирования.

Ответы [ 2 ]

0 голосов
/ 29 января 2019

Возможно, есть дублирование в ответе API или с вашей стороны при добавлении новых данных в методе loadMore.

Вы можете попробовать изменить это keyExtractor={(item,index)=> index.toString()}

и добавить это к оченьпервый компонент renderItem key={index} в качестве опоры.

Это гарантирует, что ключ, предоставленный каждому элементу в Flatlist, уникален.

0 голосов
/ 29 января 2019

Попробуйте использовать эту удобную функцию , чтобы убедиться, что в вашем массиве объектов нет дубликатов.

...