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 }){&nbsp; return(&nbsp; &nbsp; <View>&nbsp; &nbsp; &nbsp; <Text>{item.value}</Text>&nbsp; &nbsp; &nbsp; <Text>{item.key}+test</Text>&nbsp; &nbsp; </View>&nbsp; )}使成为render() {&nbsp; return (&nbsp; &nbsp; <View style={styles.container}>&nbsp; &nbsp; &nbsp; <FlatList&nbsp; &nbsp; &nbsp; &nbsp; data={orderResultJson}&nbsp; &nbsp; &nbsp; &nbsp; renderItem={({item}) => <DetailsSection item={item} />}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; keyExtractor={item => item.key}&nbsp;&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; </View>&nbsp; );}

Answer 2

function DetailsSection(props){&nbsp; return(&nbsp; &nbsp; <View>&nbsp; &nbsp; &nbsp; <Text>{props.item.key} + test</Text>&nbsp; &nbsp; &nbsp; <Text>{props.item.value}</Text>&nbsp; &nbsp; </View>&nbsp; )}或者像这样通过<DetailsSection item={item} />并像这样访问function DetailsSection({ item }){&nbsp; return(&nbsp; &nbsp; <View>&nbsp; &nbsp; &nbsp; <Text>{item.value}</Text>&nbsp; &nbsp; &nbsp; <Text>{item.key}+test</Text>&nbsp; &nbsp; </View>&nbsp; )}因为您正在传递提取的值，所以您可以直接访问