Реагируйте самостоятельно: FlatList keyExtractor & toString () Проблема?

Question

Вопрос Noob с React-Native & FlatLists:

Что на самом деле означает 2-я строка?

  data={this.state.data}
  keyExtractor={(x,i)=>i}

Я позаимствовал эту строку кода у друга (с его разрешения), и это как бы вынудило меня столкнуться с проблемой предупреждения с response-native.

Я продолжаю получать предупреждение желтого цветамне, что есть "недопустимый тип дочернего контекста".Который является реагирующим кодом для «Извините, дорогой программист, но я не могу найти ключевое поле для сортировки данных, которые вы мне предоставили! Noob! Pfft!».Я понимаю.И способ решить эту проблему - добавить .toString () к полю, которое обозначено как ключевое поле.Проблема, как вы можете видеть, в том, что это не ключевое поле, а скорее> (x, i) => i.

Так что мой вопрос - WTH: (x, i) =>i?

За исключением этого, я попытался использовать то, что, по моему мнению, было значением идентификатора записи, которую я извлекаю: this.state.data.id, поскольку плоский список рассматривает этот источник данных как обозначенныйв this.state.data, и он видит его как массив, как большинство из вас уже знают.Мой второй вопрос: почему я не могу использовать this.state.data.id в качестве ключевого поля?

И если я не могу использовать this.state.data.id в качестве ключевого поля и использовать(x, i) => i штука (независимо от того, что это за штука) и я должен ее использовать, что это такое и как мне добавить .toString () к ней?

Спасибо заранее.

Приношу свои извинения за вопрос Нуба.

Хорошего дня!

Answer 1

Очевидно, вы уже знаете, для чего нужна key опора, поэтому я не буду тратить на это слишком много времени.(Если сомневаетесь , проверьте документы ).

Итак, давайте ответим по частям.(x, i) => i является лямбда-функцией ES6 .keyExtractor - это функция, которая получает в качестве первого аргумента элемент из данных (в этом обратном вызове он назывался x), а вторым аргументом является индекс элемента в массиве данных (в данном случае называемый i).Таким образом, код говорит: «используйте в качестве ключа для моего элемента индекс в массиве».

keyExtractor необходим, потому что FlatList инкапсулирует возвращаемое значение вашего renderItem и нуждается в key длясписок.(Я могу пойти глубже, если хотите).

Обратите внимание, что keyExtractor предоставляет ключи для каждого элемента, а не для самого списка, поэтому, используя this.state.data.id, вы поместите один и тот же ключ во все элементы, а это не то, что вам нужно.

Наконец, часть .toString() только потому, что тип ключа, ожидаемый FlatList, является строкой, поэтому предупреждение.

Answer 2

(x, i) => i на самом деле является функцией обратного вызова, где x = item и i = index, поэтому вы возвращаете index в качестве ключа.Рассмотрите это как:

keyExtractor={(item,index)=>index}

Поскольку он хочет, чтобы ключ был строкой, вы можете использовать:

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