React Native待办应用：如何为每个新增任务添加删除按钮？

我正在开发一个入门级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>
  );
}

能否实现每个任务右侧带有删除按钮（点击即可删除对应任务）的效果？

实现方案 #

要完成需求，需要调整任务存储结构、添加删除逻辑，并修改任务项的渲染方式，具体步骤如下：

1. 优化任务数据结构
   放弃直接存储任务文本，改为存储包含唯一ID和文本的对象，避免因索引变动导致的key异常，同时方便删除时定位任务。

2. 添加删除任务函数
   通过任务ID过滤数组，移除目标任务并更新状态。

3. 修改任务项渲染
   每个任务项用View横向布局，左侧显示任务文本，右侧放置删除按钮。

完整代码示例 #

import { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';

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

  // 添加任务：生成唯一ID并添加到列表
  function addTodoHandler() {
    if (!newTask.trim()) return; // 避免添加空任务
    setTaskList([
      ...taskList,
      { id: Date.now(), text: newTask.trim() }
    ]);
    setNewTask(''); // 清空输入框
  }

  // 删除任务：根据ID过滤列表
  function deleteTaskHandler(taskId) {
    setTaskList(taskList.filter(task => task.id !== taskId));
  }

  return (
    <View style={styles.container}>
      <View style={styles.contentContainer}>
        <View>
          <Text style={styles.sectionTitle}>TO-DO LIST</Text>
        </View>
        <View style={styles.taskContainer}>
          {taskList.map((task) => (
            <View key={task.id} style={styles.taskItem}>
              <Text style={styles.taskText}>{task.text}</Text>
              <Button 
                title="删除" 
                onPress={() => deleteTaskHandler(task.id)} 
                color="#ff4444"
              />
            </View>
          ))}
        </View>
      </View>
      <View style={styles.addTaskWrapper}>
        <TextInput 
          placeholder="Enter Task" 
          onChangeText={setNewTask}
          value={newTask}
          style={styles.input}
        />
        <Button title="Add Task" onPress={addTodoHandler} />
      </View>
    </View>
  );
}

// 样式定义（接近示例图效果）
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  contentContainer: {
    flex: 1,
    marginBottom: 20,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginVertical: 20,
  },
  taskContainer: {
    gap: 10,
  },
  taskItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 12,
    backgroundColor: 'white',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  taskText: {
    fontSize: 16,
    flex: 1,
    marginRight: 10,
  },
  addTaskWrapper: {
    flexDirection: 'row',
    gap: 10,
    alignItems: 'center',
  },
  input: {
    flex: 1,
    padding: 10,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
  },
});

关键说明 #

• 用Date.now()生成任务ID，保证唯一性，避免使用数组索引作为key导致的渲染问题
• 添加任务时先判断输入是否为空，防止无效任务
• 每个任务项采用横向布局，通过flexDirection: 'row'实现文本和按钮并排
• 删除按钮通过闭包传递当前任务ID，确保点击时能准确删除对应任务

内容的提问来源于stack exchange，提问作者buckwheat