如何在React Native中从列表中删除一个项目？

Question

我刚开始学习React Native。我试图创建一个简单的应用程序，其中有一个按钮，它将删除列表的最后一个元素，然后该列表将被更新。问题在于，当我点击按钮时整个列表都被删除了。能否有人帮助我解决这个问题吗？

谢谢！

    //delete Item from the list
    class ButtonDelete extends Component{
     constructor(props){
       super(props);
        this.handleChange = this.handleChange.bind(this)
      }
      handleChange(){
     this.props.deleteItem();
  }
  render(){
    const data = this.props.data;
    return(
      <View>
        <FlatList
          data={data}
          renderItem={({item}) => <Greetings name = {item.key} ></Greetings>}
        />
        <Button
        onPress={this.handleChange}
        title="Delete"
        color="#841584"
        />
      </View>

    );
  }
}


export default class FlatListBasics extends Component {
  constructor(props){
    super(props);
    this.state = {
      data: [
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ]
    }
    this.deleteItem = this.deleteItem.bind(this);
  }

    deleteItem() {
      this.setState(prevState => ({
          data: prevState.data.pop()
      }));
      }


  render() {
    const data = this.state.data;
    return (
      <View>
        <ButtonDelete data = {data}
        deleteItem={this.deleteItem}/>
      </View>
    );
  }
}

- Khoa Tan Dang

Answer 1

请使用以下代码替换您的deleteItem()方法。因为pop()会移除数组的顶部元素并返回该元素，而不是返回已删除对象的列表。

deleteItem() {
    let items = this.state.data;
    items.pop();

    this.setState({ data: items });
}

- Kaushik Radadiya

---

既然您已经改变了状态，那么最好就这样做：items.pop(); this.setState({ }); - iuliu.net

Answer 2

array.pop() 不会返回一个移除了元素的新数组，它会修改原始数组。

在我看来，最好的解决方案是使用 slice 以获取一个去掉最后一个元素的新数组，然后你可以用它来更新你的 state，这样你的删除函数看起来差不多像这样：

deleteItem() {
   const newArray = this.state.data.slice(0, -1)

   this.setState({
       data: newArray
   });
}

- Andrei Olar