Question

问题是我在函数内部看不到{item.key}。当我在平面列表中键入{item.key}本身时，它就可以正常工作。但是在内部函数中仅显示{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>
    );
  }

Answer 1

这里的问题是，当您将item解构为单个道具时，道具key将被视为内置的反应道具key，而不是将其视为外部道具。 / p>

因此，与其解构，不如按原样传递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>
  );
}

Answer 2

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>
  )
}

因为您要传递提取的值，以便直接访问

Flatlist RenderItem内部的功能无法完全正常工作

2 个答案: