如何删除 ReactNative(JS) 列表中的特定元素

Question

我制作了一个待办事项列表，无论我输入什么都会被推送到一个数组中。当我映射数组时，我放了一个垃圾桶按钮，他们可以在其中删除“待办事项”列表。我尝试了Splice方法，但没有用。例如，我有一个列表，上面写着：

“买牛奶”

“拿鸡蛋”

如果我想删除“Get Eggs”，它会删除“Buy Milk”（它会删除顶部的任何内容）。有人可以帮助我如何实现这一目标。这是我的代码（React 本机代码）：

removeList = (item) => {

  let val = this.state.noteList;

  let arr = val.splice(item, 1); // <= this is what I did but it is removing the first element of the list

  let complete = this.state.completedTask;

  complete.push(arr);

 this.setState({

 arr

})

};

这是我的可触摸不透明度：

<TouchableOpacity

  onPress={this.removeList}

  style={{

    height: deviceHeight / 10,

    width: deviceWidth / 6,

    backgroundColor: "#e6a25c",

    justifyContent: "center",

  }}

>

  <AntDesign

    name="checkcircleo"

    size={45}

    color="black"

    style={{ alignSelf: "center" }}

  />

</TouchableOpacity>;

这对你来说似乎是一个愚蠢的问题，但我似乎无法弄清楚。

编辑：我试图做一个平面列表而不是映射，但它对我不起作用。难道我做错了什么：

let newNote = [] // This is new NOTE and NOT THE COMPLETED SCREEN

newNote.push(

  <FlatList 

    data={this.state.noteList} 

    

    ListHeaderComponent={this.renderHeader}

    

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

        <View style={{height:100,width:200,backgroundColor: "black"}}>

     

      <View style={styles.newBoxView}>

        <Text>{item}</Text>

      </View>

      </View>

     

    }}

  />

  

)

Answer 1

我找到了我的答案，所以如果有人遇到同样的问题，这里是代码：`deleteNote = (index) => {console.log(index)&nbsp;let arr = this.state.noteList;&nbsp;delete arr[index]&nbsp;this.setState({&nbsp; activeCounter: Number(this.state.activeCounter - 1)&nbsp;})}`这是我的映射代码：&nbsp; `this.state.noteList.map((item,index) =>&nbsp;&nbsp; &nbsp;<View style={styles.createBox}>&nbsp;&nbsp;&nbsp; &nbsp;<View style={{flex:4,justifyContent: 'center',backgroundColor:&nbsp;&nbsp; &nbsp;"lightpink",}}>&nbsp; &nbsp; <Text&nbsp; style={{textAlign:'center',fontSize:deviceWidth/20,}}>&nbsp; &nbsp; {item.trim()}&nbsp;&nbsp;&nbsp; </Text></View><TouchableOpacity key={index} onPress={() => this.deleteNote(index)} style={{flex:1,justifyContent: 'center'}}><AntDesign&nbsp; name="checkcircleo" style={{alignSelf:'center',backgroundColor: "#e6a25c"}} size={deviceWidth/5} color="black" /></TouchableOpacity>)`我希望这有帮助。这实际上花了我 1 周的时间才弄清楚，最后我弄明白了。

Answer 2

尝试这个：removeList = (item) => {&nbsp; let val = this.state.noteList;&nbsp; let arr;&nbsp; for (let i = 0; i < val.length; i++) {&nbsp; &nbsp; if (val[i] === item) {&nbsp; &nbsp; &nbsp; arr = val.splice(i, 1);&nbsp; &nbsp; }&nbsp; }&nbsp; let complete = this.state.completedTask;&nbsp; complete.push(arr);};