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>
    );
  }
}

Answer 1

以此替换您的 deleteItem（）方法。因为pop()删除了数组的顶部元素并返回了该元素。它不会返回删除了对象的列表。

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

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

Answer 2

array.pop()在没有移除元素的情况下不会返回新数组。它将更改原始数组。

我认为最好的解决方案是使用slice来获取没有最后一个元素的新数组，您可以使用该元素来更新状态，因此您的delete函数看起来像这样：

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

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

如何从React Native中的列表中删除项目？

2 个答案: