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

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 数组

您的代码中的问题是：

1. 您正在通过直接在 this.state.messageList 上调用 .splice() 来改变状态

2. .splice() 返回已删除的项目，而不是剩余的项目，因此，在您对您的状态调用 .splice() 后，您的新列表仅包含您已删除的项目

玩得开心！