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

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 解构为单独的 props 时，prop key 将被视为内置的 React prop key将其视为外部 Prop 。

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