Flatlist RenderItem 内的功能未完全正常工作

Question

问题是我在函数中看不到 {item.key}。当我在 flatlist 渲染中键入 {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 而不是将其视为外部道具。

因此，不要解构，而是按原样传递 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>
  )
}

因为您正在传递提取的值，所以您可以直接访问