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>

  )

}

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