Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

FlatList com keyExtractor: inteiro e string

Olá, Ao utilizar uma FlatList, devemos informar o keyExtractor. Quando utilizei o id como inteiro, o seguinte alerta foi apresentado:

Warning:  Failed child context type:
    Invalid child context `virtualizedCell.cellKey` 
    of type `number` supplied to `CellRenderer`, 
    exptected  `string`.

Tendo em vista esse problema, realizei a seguinte alteração:

// DE:
keyExtractor={item => item.id}

// PARA
keyExtractor={item => item.id + ''}

Existe alguma maneira mais elegante para solucionar este problema? Obrigado.

2 respostas

Encontrei essa solução que também pode ser uma alternativa:

keyExtractor={(item, index) => index.toString()}
solução!

Fala Gerson, tudo bem ?

De alguns releases pra cá o React Native fez a chave necessariamente receber String, então não tem muito jeito. Em um projeto pessoal por exemplo fiz de outra forma.

Adicionei inclusive na explicação do curso essa parte:

Nas últimas versões do React Native o componente de lista utilizado espera receber como chave identificadora de cada elemento renderizado (key) uma String, soltando um warning caso o tipo de dado repassado seja diferente. Sendo assim poderíamos facilmente contornar esse detalhe fazendo o seguinte ajuste na propriedade keyExtractor...

keyExtractor={item => String(item.id)}

Assim crio uma nova representação simples String a partir do dado numérico, mas é só uma questão de abordagem. A concatenação por exemplo também cria uma nova String a partir do dado numérico. Só achei a construção de uma String

Espero ter ajudado. Abraço!