Question

我正在使用React Native制作一个待办事项列表应用程序，在其中我将事件添加到FlatList，然后有一个按钮，该按钮在事件结束后将其删除。到目前为止，这就是我所拥有的。对我来说似乎很hacky，但大多数都能正常工作。

import React from 'react';
import { StyleSheet, Text, View, TextInput,TouchableOpacity, FlatList} from 'react-native';


export default class App extends React.Component {

  constructor(props){
    const data = [];
    super(props);
    this.state ={
      text: 'Enter activity here',
      data: data,
      color: true,
      currNum: 0,
    }

  }
  updateText(){
    this.setState({data:this.state.data.concat({key:this.state.text,index:this.state.currNum})});
    this.state.currNum++;

  }
  removeText(item){
    this.setState({data:this.state.data.pop(item.index)});
    this.state.currNum--;

  }
  

  render() {

    return (
      <View style={styles.container}>
        <Text></Text>
        <View style = {{flexDirection:'row',justifyContent:'flex-end'}}>
          <TextInput style = {{fontSize:30,borderColor:'black', flex:1, marginTop:20}} onChangeText = {(text) => this.setState({text})}value = {this.state.text}/>
          <TouchableOpacity style = {{marginTop:20}}onPress = {()=>(this.updateText())}>
            <Text>Add to list</Text>

          </TouchableOpacity>

        </View>

        <View style = {{flex:1, flexDirection:'row'}}>
            <FlatList
              data = {this.state.data}
              extraData = {this.state}
              renderItem = {({item}) => <View><Text style={styles.text} >{item.key}</Text><TouchableOpacity onPress = {() => this.removeText(item)}><Text>Remove</Text></TouchableOpacity></View>}
              />

          </View>

      </View>


    );
  }
}

当我按下“删除”按钮时，我从FlatList使用的数据列表中删除了一个元素。但是，每当我这样做时，我都会收到一条错误消息：“试图获取超出范围索引NaN的帧”。有没有一种方法可以让我定期更新和删除FlatList，并在删除项目后重新渲染FlatList？我尝试使用extraDate道具，但是没有用。我相信我用错了。谢谢您的帮助。

Answer 1

相反，您不应该使用this.state和Array.prototype.pop（）对其进行更改

removeText(item, index){
   this.setState({data: [
      ...this.state.data.slice(0, index),
      ...this.state.data.slice(index + 1)
   ]});
   this.state.currNum--;
}

Answer 2

我认为您应该使用.filter

removeText(item){
    this.setState({
       data: this.state.data.filter((_item)=>_item.key !== item.key)
    });
}

this.state.currNum的用途是什么？

如何从FlatList中删除项目，然后在React Native中更新该列表？

2 个答案: