如何在反应原生数组中获取所选元素的索引答案

【问题标题】：how to get the index of selected element in react native array如何在反应原生数组中获取所选元素的索引
【发布时间】：2018-10-04 07:41:39
【问题描述】：

我想要反应原生数组中选定元素的索引。我尝试使用 indexOf() 但它总是返回-1。 School 是我的数组，email 包含要查找其索引的元素的值。

deleteDetails = (email) => {
  var index = School.indexOf(email);
}

【问题讨论】：

你能分享一下你的School数组的内容吗？
@PrasunPal School 数组包含电子邮件 ID
能否分享console.log(School)值的输出，我只是想知道它是字符串还是对象。
0：{电子邮件：“test1@test.com”，备注：“tt”，slno：1} 1：{电子邮件：“test2@test.com”，备注：“ttt”， slno：2} 2：{电子邮件：“test3@test.com”，备注：“tttt”，slno：3} 3：{电子邮件：“test4@test.com”，备注：“4”，slno：4}成功：“真”长度：4 原型：Array(0)

标签： arrays react-native

【解决方案1】：

根据您的评论，School 是一个对象数组，因此您需要使用 findIndex 而不是 indexOf

var arr = [{
  email: "test1@test.com",
  remarks: "tt",
  slno: 1
}, {
  email: "test2@test.com",
  remarks: "ttt",
  slno: 2
}, {
  email: "test3@test.com",
  remarks: "tttt",
  slno: 3
}, {
  email: "test4@test.com",
  remarks: "4",
  slno: 4
}];

function getIndex(email) {
  return arr.findIndex(obj => obj.email === email);
}

console.log(getIndex("test4@test.com"));

希望这会有所帮助！

【讨论】：

嗨，Prasun 希望你很好，你能看看我的问题。非常感谢任何可能的帮助。stackoverflow.com/questions/65786115/…

【解决方案2】：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

根据文档，indexOf 仅在数组中未找到值时返回 -1。在调用 indexOf 之前检查您的 School 数组和电子邮件值。您可以使用调试器，也可以在调用 indexOf 之前添加 console.log。

deleteDetails = (email) => {
  console.log(email);
  console.log(School);
  var index = School.indexOf(email);
}

如果您的电子邮件元素是字符串“abc@email.com”，则您的数组应包含字符串元素。

var email = "abc@email.com";
var emails = ["abc@email.com", "def@email.com"];
console.log(emails.indexOf(email));
// expected output: 0

编辑：考虑到下面的 cmets，您的回调方法应该返回元素的索引。所以deleteDetails函数应该是这样的。

deleteDetails(email, index) {
      // code
    }

让我们考虑 Flatlist 上市。

<FlatList
        data={this.props.data}
        extraData={this.state}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
      />

_renderItem = ({item, index}) => (
<MyListItem
  id={item.id}
  onPressItem={this._onPressItem}
  selected={!!this.state.selected.get(item.id)}
  title={item.title}
  onDeleteButtonPressed={(item, index) => this.deleteDetails(item,index)}
/>
);

并且你必须创建一个 onDeleteButtonPressed 属性并在组件中按下按钮时调用它以触发 deleteDetails 函数。

【讨论】：

仍然返回-1，我尝试使用以下 var email1 = email; console.log（学校）； var emails = 学校； console.log(emails.indexOf(email1));控制台结果是：0：{email：“test1@test.com”，备注：“tt”，slno：1} 1：{email：“test2@test.com”，备注：“ttt”，slno：2 } 2：{电子邮件：“test3@test.com”，备注：“tttt”，slno：3} 3：{电子邮件：“test4@test.com”，备注：“4”，slno：4}成功：“ true" 长度：4 proto：Array(0) -1
如果我没看错，您的学校数组包含对象，而不仅仅是字符串或数字。你能写出你的 console.log(email) 输出吗？
实际上它显示为带有删除图标的列表，当我单击删除第二封电子邮件时，console.log(email) 输出为 test2@test.com
您的数组包含对象，但您正试图在其中查找字符串和对象数组。你找不到。我正在上面写一个可能的答案。

【解决方案3】：

如果您使用的是 Flatlist，那么；

renderDataItem = ({item, index}) => {
return (
  <TouchableWithoutFeedback
    onPress = {() => Actions.testing2({ sayi : index })}>
    <View style = {styles.allCointer}>
      <View style = {styles.textContainer}>
        <Text style={styles.textContainerTitle}> {item.Title} </Text>
        <Text style={styles.textContainerText}> {item.Description} </Text>
      </View>
      <Image
        style = {styles.image}
        source = {{uri : item.Files[0].FileUrl}}
      />
    </View>
  </TouchableWithoutFeedback>
)}

该行中的

index参数，

renderDataItem = ({item, index}) => {

是您当前的索引值。

【讨论】：