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

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

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

Answer 2

这里的问题是，当你将 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>
  );
}

Flatlist RenderItem 中的函数没有完全工作

Function inside Flatlist RenderItem is not fully working

javascript

reactjs

react-native

react-native-flatlist