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

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

1 голос
/ 16 мая 2019

Я пытаюсь получить объект, описанный в следующей конечной точке: https://api.cosmicjs.com/v1/67302ce0-7681-11e9-8193-4bd8888ec129/objects?pretty=true&hide_metafields=true

Как вы заметили, есть поле _id с уникальным идентификатором.

Так почему я получаю:

"Предупреждение. Обнаружены двое детей с одним и тем же ключом, :. Ключи должны быть уникальным, чтобы компоненты сохраняли свою идентичность при обновлении. Неуникальные ключи могут привести к тому, что дочерние элементы будут дублированы и / или опущены - поведение не поддерживается и может измениться в будущей версии. "

Вот мой рендер FlatList: 

render() {   
    if(this.props.dataToDisplay.objects){
        console.log(typeof(this.props.dataToDisplay.objects))
        console.log(this.props.dataToDisplay.objects)
        this.props.dataToDisplay.objects.forEach((item)=>{
            console.log(item)
        })

        return (
            <View style={[{backgroundColor: this.state.backgroundColor},styles.container]}>
                <FlatList
                    data={this.props.dataToDisplay.objects}
                    keyExtractor={(item, index)=>{item._id.toString()}}
                    renderItem={({item})=>{
                        <Text id={item._id}>{item.title}</Text>
                    }}
                />
            </View>
        );
}
 else {

    return (
        <View style={[{backgroundColor: 
this.state.backgroundColor},styles.container]}>
            <Text>Loading elements.</Text>
        </View>
      );
    }
  }
}

Может ли быть проблема с keyExtractor? Я попытался с keyExtractor = {(item, index) => {item._id}} безрезультатно ...

Спасибо за ваше время.

Ответы [ 3 ]

3 голосов
/ 16 мая 2019

keyExtractor в порядке.функция return не является: 

keyExtractor={(item, index)=>{item._id.toString()}}

, открывая фигурные скобки {}, чтобы получить что-либо, движку нужно ключевое слово return.В противном случае это void

, либо: 

keyExtractor={(item, index)=> item._id.toString()}

или: 

keyExtractor={(item, index)=> { return item._id.toString()}}

То же самое относится и к методу renderItem: 

renderItem={({item})=>{
           <Text id={item._id}>{item.title}</Text>
         }}

поскольку вы открыли {}, вы отменили неявный возврат функции стрелки, и вам необходимо явно добавить его 

renderItem={({item})=>{
        return <Text id={item._id}>{item.title}</Text>
         }}

btw, id не является одним из элементов <Text/>.Без функции keyExtractor вам бы пришлось добавить свойство key самостоятельно (вместо id).чувствовать себя в безопасности, чтобы удалить его =)

0 голосов
/ 16 мая 2019

В вашем примере у вас нет атрибута с именем "ключ", по этой причине у вас есть ошибка.Вам следует попытаться назначить другой атрибут, например ключевой элемент, возможно, атрибут "_id", который существует в вашем объекте, что-то вроде этого: 

<FlatList
data={this.props.dataToDisplay.objects}
keyExtractor={(item, index) => {item._id}}
numColumns={2}
renderItem={({item})=>{
  <Text id={item._id}>{item.title}</Text>
}}
/>
0 голосов
/ 16 мая 2019

Вместо keyExtractor={(item, index)=>{item.key}} это использование keyExtractor={(item, index)=>{index.toString()}}

...