使用 FlatList 中的状态删除多个项目。反应本机

Question

我正在尝试使用 React Native 制作待办事项列表。如何删除 FlatList 中具有 completed: true 状态且带有 TouchableOpacity（充当按钮）的所有项目的多个项目。我不知道应该在 function deleteCompleteTodo()

中输入什么方法

import React, {useState} from 'react';
import { Text, SafeAreaView, StatusBar, FlatList, View, TouchableOpacity,Button, Alert } from 'react-native';
import TodoInput from "./TodoInput";
import TodoItem from "./TodoItem";
const App = () => {
    const [todoItems, setTodoItems] = useState([{text: "Buy groceries", completed: true}, {text: "Make blogpost", completed: false}]);
    // Add a new item to the state
    function addTodoItem(_text) {
        setTodoItems([...todoItems, {text:_text, completed: false}]);
    }
    // Delete an item from state by index
    function deleteTodoItem(_index){
        let tempArr = [...todoItems];
        tempArr.splice(_index, 1);
        setTodoItems(tempArr)
    }
    // Function to set completed to true by index.
    function completeTodoItem(_index){
        let tempArr = [...todoItems];
        if(tempArr[_index].completed){
          tempArr[_index].completed = false
        }
        else{
          tempArr[_index].completed = true
        }
        setTodoItems(tempArr)
    }
    // Function to delete all completed task
    function deleteCompleteTodo(){
      let tempArr = [...todoItems];
      var i=0;
      tempArr.map()
    }


    // Render
    return (
        <>
            <View style={{flex: 1}}>
              <SafeAreaView style={{justifyContent: 'flex-start', flex: 1, backgroundColor: '#dfdfdf', padding: 14, paddingTop: 35}}>
              <StatusBar barStyle={"light-content"} backgroundColor={"#212121"}/>

              <View style={{flexDirection: 'row', height: 45, justifyContent: 'space-between', marginBottom: 10, borderRadius: 10, backgroundColor: '#d4d1c9'}}>
                <View style={{paddingHorizontal: 10, paddingVertical: 5}}>
                  <Text style={{fontSize: 36, fontWeight: 'bold'}}>Todo</Text> 
                </View>
                {/*Button*/}
                <View style={{paddingHorizontal: 10, paddingVertical: 5}}>
                  {/* <Text style={{fontSize: 36, fontWeight: 'bold'}}>D</Text> */}
                  <TouchableOpacity
                    
                    style={{width:50, paddingVertical:8 , backgroundColor: '#ff0000', justifyContent: 'center', alignItems: 'center', borderRadius: 100}}  
                    onPress={() => deleteCompleteTodo()}>
                    <Text style={{color: '#fafafa', fontWeight: 'bold'}}>Delete</Text>
                                  
        </TouchableOpacity>
                </View>
              </View>

              <FlatList
                    data={todoItems}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={({item, index}) => {
                        return (
                            <TodoItem
                                item={item}
                                deleteFunction={() => deleteTodoItem(index)}
                                completeFunction={() => completeTodoItem(index)}
                            />
                        )
                    }}
                />
              <TodoInput onPress={addTodoItem} />
              </SafeAreaView>
            </View>
           
        </>
    );
};
export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

您可以使用 filter 删除多个项目：

deleteCompleteTodo = () => {
  setTodoItems(preState => preState.filter(item => !item.completed))
}

使用 FlatList 中的状态删除多个项目。反应本机

Delete multiple items using state in FlatList. React Native

reactjs

react-native

react-native-flatlist