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

时间:2018-04-23 23:21:13

标签: javascript arrays reactjs react-native

我试图通过触摸来删除我的单位列表中的项目,但我无法这样做。我知道我需要将触摸的索引传递给我的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>
    );
  }
}

1 个答案:

答案 0 :(得分:3)

这样做:

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. 您正在通过.splice()

  2. 直接致电this.state.messageList来改变州
  3. .splice()会返回已删除的项目,而不会返回剩余的项目,因此,在您的状态上调用.splice()后,您的新列表仅包含您已删除的项目< / p>

  4. 玩得开心!