添加的每个输入的删除按钮

Question

我正在构建这个初学者 react-native 应用程序，它列出了正在进行的任务，还允许用户在需要时删除任务。我已经能够显示每个任务，但我不知道如何为每个添加的任务添加删除按钮。

下面是我想出的代码，但我还不能为每个任务制作一个删除按钮。

export default function App() {
      const [newTask,setNewTask] = useState();
      const [taskList,setTaskList] = useState([]);

      const convertedTaskList = taskList.map((toDoTask,index)=>({
        id: index+1,
        activity:toDoTask,
        status:'complete'
        }))

      function addTodoHandler(){
      setTaskList([...taskList,newTask])
      }

      return (
      <View style={styleSheet.container}>
        <View style={styleSheet.contentContainer}>
            <View>
                <Text style={styleSheet.sectionTitle}>TO-DO LIST</Text>
            </View>
            <View style={styleSheet.taskContainer}>
                {taskList.map((task)=><Text key={task}>{task}</Text>)}
            </View>
        </View>
        <View style={styleSheet.addTaskWrapper}>
            <TextInput placeholder="Enter Task" onChangeText={(enteredText)=>setNewTask(enteredText)}/>
            <Button title="Add Task" onPress={addTodoHandler}/>
        </View>
      </View>
      );
    }

有没有办法让我像我通过下面的链接附上的图片一样输出？

Answer 1

尝试在地图中添加它：

<View style={styleSheet.taskContainer}>
  {taskList.map((task, index)=> (
    <>
      <Text key={task}>{task}</Text>
      <Button title="Delete" onPress={() => setTaskList((prev) => prev.slice(index, 1))} />
    </>
  ))}
</View>