如何在React Native数组中获取所选元素的索引

Question

如何在React Native数组中获取所选元素的索引

8

我希望能够在react native数组中找到所选元素的索引。我尝试了indexOf()，但它总是返回-1。School是我的数组，email包含要查找其索引的元素的值。

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

- Fahad

请问可否分享一下你的"School"数组内容？ - Prasun

@PrasunPal 学校数组包含电子邮件地址。 - Fahad

请你分享一下console.log(School)的输出值，我想知道它是字符串还是对象。 - Prasun

0: {email: "test1@test.com", remarks: "tt", slno: 1} 1: {email: "test2@test.com", remarks: "ttt", slno: 2} 2: {email: "test3@test.com", remarks: "tttt", slno: 3} 3: {email: "test4@test.com", remarks: "4", slno: 4} success: "true" length: 4 proto: Array(0) - Fahad

3个回答

4

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

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

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

编辑：考虑到下面的评论，你的回调方法应该返回元素的索引。因此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函数。

- Sedat Öztürk

仍然返回-1，我尝试了以下代码：

        var email1 = email;
        console.log(School);
        var emails = School;
        console.log(emails.indexOf(email1));

并且控制台输出结果为：

  0: {email: "test1@test.com", remarks: "tt", slno: 1}
  1: {email: "test2@test.com", remarks: "ttt", slno: 2}
  2: {email: "test3@test.com", remarks: "tttt", slno: 3}
  3: {email: "test4@test.com", remarks: "4", slno: 4}

success: "true" length: 4 proto: Array(0)-1 - Fahad

如果我理解正确的话，你的学校数组包含的是对象，而不仅仅是字符串或数字。你能写出你的console.log(email)输出吗？ - Sedat Öztürk

实际上它显示为一个列表，带有一个删除图标，当我点击删除第二个电子邮件时，console.log(email)输出是test2@test.com。 - Fahad

你的数组包含对象，但你试图在对象数组中查找字符串。这是不可能的。我在上面写了一个可能的答案。 - Sedat Öztürk

1

如果您正在使用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}) => {

是您当前的索引值。

- Kenshin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Prasun · Accepted Answer

根据您的评论，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"));

希望这能有所帮助！