Question

我试图通过触摸来删除我的单位列表中的项目，但我无法这样做。我知道我需要将触摸的索引传递给我的deleteMessage()函数，但我不知道该怎么做。

deleteMessage(item) {
    console.log("delete message!");
    console.log(item);
    index = this.state.messageList.indexOf(item);
    console.log(index);
    let newList = this.state.messageList.splice(index, 1);
    console.log(newList);
    this.setState({
      messageList: newList

    });
  }

  renderMessage(message) {
    console.log(message.item);
    return (
      <TouchableHighlight onPress={()=> this.deleteMessage()}>
        <Text style={styles.message}> {message.item} </Text>
      </TouchableHighlight>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList  
          style={styles.listContainer}
          data={this.state.messageList}
          renderItem={item => this.renderMessage(item)}
        />
        <View style={styles.sendContainer}>
          <TextInput
            style={styles.TextInputStyle}
            onChangeText={text => this.handleInputMessage(text)}
            placeholder="type message here"
            value={this.state.message}
          />
          <Button onPress={() => this.handleSubmitMessage()} title="sennd" />
        </View>
      </View>
    );
  }
}

Answer 1

这样做：

deleteMessage(item) {
    var messageList = [...this.state.messageList]
    let index = messageList.indexOf(item);
    messageList.splice(index, 1);
    this.setState({ messageList });
}

...被称为Spread Operator，在上面的代码中，它复制了this.state.messageList数组。因此，当您对其进行任何更改时，您正在更改messageList数组中的内容而不是this.state.messageList数组

代码中的问题是：

您正在通过.splice()

this.state.messageList

.splice()会返回已删除的项目，而不会返回剩余的项目，因此，在您的状态上调用.splice()后，您的新列表仅包含您已删除的项目< / p>

玩得开心！

无法从平面列表中删除项目

1 个答案: