javascript - arr.splice() 方法删除反应原生项目中的错误项目

Question

我正在用 react-native 制作一个待办事项应用程序。我做了一个删除按下任务的功能，但是当我按下时，它会删除列表中的第一个项目，而不是我按下的那个。这是我使用的代码：

 let id = 0;
  const [task, setTask] = useState("");
  const [taskList, setTaskList] = useState([
    { name: "Add your first task", id: id++ },
  ]);
  const handleTask = (e) => {
    e.preventDefault();
    setTaskList([...taskList, { name: task, id: id++ }]);
    setTask("");
  };
  function completeTask(index) {
    let itemsCopy = [...taskList];
    itemsCopy.splice(index, 1);
    setTaskList(itemsCopy);
  }
    {taskList.map((taskList, index) => {
              return (
                <View style={styles.wrapper}>
                  <View style={styles.text}>
                    <TouchableOpacity key={index} onPress={completeTask}>
                      <Text> {taskList.name} </Text>
                    </TouchableOpacity>
                  </View>
                </View>
              );
            })}

标签： javascriptarraysreactjsreact-native

Answer 1

completeTask调用和更新状态错误的方式时，您不会传递索引。

onPress={() => completeTask(index)}

function completeTask(index) {
  setTaskList((preTasks) => preTasks.filter((item, i) => i !== index));
}