Функция внутри Flatlist RenderItem работает не полностью - PullRequest
Новая
       28

Функция внутри Flatlist RenderItem работает не полностью

0 голосов
/ 11 ноября 2019

Проблема в том, что я не вижу {item.key} внутри своей функции. Когда я сам набираю {item.key} внутри рендера flatlist, он работает. Но внутри функции показывается только {item.value}. Может кто-нибудь объяснить мне, почему это происходит?

Пример данных 

const orderResultJson = [
  {
    key: 'Скачайте приложение по ссылке',
    value: 'https://google.com'
  },
  {
    key: 'Логин',
    value: '879854'
  },
  {
    key: 'Пароль',
    value: '849846'
  },
];

Моя функция 

function DetailsSection(item){
  return(
    <View>
      <Text>{item.value}</Text>
      <Text>{item.key}+test</Text>
    </View>
  )
}

Визуализация 

render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={orderResultJson}
          renderItem={({item}) => <DetailsSection {...item} />} 
          keyExtractor={item => item.key} 
        />
      </View>
    );
  }

Ответы [ 2 ]

3 голосов
/ 11 ноября 2019

Проблема здесь в том, что когда вы деконструируете item как отдельный реквизит, реквизит key будет рассматриваться как встроенный реактивный реквизит key вместо того, чтобы рассматривать его как внешний реквизит.

вместо деконструкции передайте item как есть и получите доступ к нему из вашей функции как есть.

Моя функция 

function DetailsSection({ item }){
  return(
    <View>
      <Text>{item.value}</Text>
      <Text>{item.key}+test</Text>
    </View>
  )
}

Визуализация 

render() {
  return (
    <View style={styles.container}>
      <FlatList
        data={orderResultJson}
        renderItem={({item}) => <DetailsSection item={item} />} 
        keyExtractor={item => item.key} 
      />
    </View>
  );
}
1 голос
/ 11 ноября 2019 
function DetailsSection(props){
  return(
    <View>
      <Text>{props.item.key} + test</Text>
      <Text>{props.item.value}</Text>
    </View>
  )
}

или

передать как 

<DetailsSection item={item} />

и получить доступ как этот 

function DetailsSection({ item }){
  return(
    <View>
      <Text>{item.value}</Text>
      <Text>{item.key}+test</Text>
    </View>
  )
}

, потому что вы передаете извлеченное значение, так что вы можете напрямую получить доступ

...