任务服务没有以正确的方式创建任务

Question

我在 ReactJS 的组件中有一个任务管理器，名为

MyComponentTwo

:

import React, { useState, useEffect } from 'react';
import TaskService from '../../services/taskService';

const MyComponentTwo = () => {
    const [tasks, setTasks] = useState([]);

    const taskService = new TaskService();

    const loadTasks = () => {
        setTasks(taskService.getAllTasks());
    };

    useEffect(() => {
        loadTasks();
    }, []);

    const handleAddTask = () => {
        const title = prompt('Whats your Task?');
        if (title) {
            taskService.addTask(title);
            loadTasks();
        }
    };

    const handleCompleteTask = (taskId) => {
        taskService.completeTask(taskId);
        loadTasks();
    };

    return (
        <div>
            <h1>My Component Two</h1>
            <button onClick={handleAddTask}>Add New Task</button>
            <ul>
                {tasks.map(task => (
                    <li key={task.id}>
                        {task.title} - {task.completed ? 'Completed' : 'Pending'}
                        {!task.completed && (
                            <button onClick={() => handleCompleteTask(task.id)}>Finish</button>
                        )}
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default MyComponentTwo;

这是我的

taskService.js

:

class TaskService {
    constructor() {
        this.tasks = [
            { id: 1, title: 'Buy Bread', completed: false },
            { id: 2, title: 'Learn ReactJS', completed: true },
            { id: 3, title: 'Do Exercises', completed: false },
        ];
    }

    getAllTasks() {
        return this.tasks;
    }

    addTask(title) {
        const newTask = {
            id: this.tasks.length + 1,
            title: title,
            completed: false
        };
        this.tasks.push(newTask);

    }
    
    completeTask(taskId) {
        alert(taskId);
        const task = this.tasks.find(task => task.id === taskId);
        if (task) {
            task.completed = true;
        }
    }
}

export default TaskService;

我的代码有两个问题：

• 添加了新项目，但从第二次添加开始它会覆盖，这将任务数量限制为 4。
• 当我单击完成任务按钮时，另一个任务的值为 false。

我做错了什么以及如何解决这个问题？

Answer 1

更新 MyComponentTwo 组件

import React, { useState, useEffect } from 'react';
import TaskService from '../../services/taskService';

const MyComponentTwo = () => {
    const [tasks, setTasks] = useState([]);

    const taskService = new TaskService();

    const loadTasks = () => {
        setTasks(taskService.getAllTasks());
    };

    useEffect(() => {
        loadTasks();
    }, []);

    const handleAddTask = () => {
        const title = prompt('Whats your Task?');
        if (title) {
            taskService.addTask(title);
            loadTasks();
        }
    };

    const handleCompleteTask = (taskId) => {
        taskService.completeTask(taskId);
        loadTasks();
    };

    return (
        <div>
            <h1>My Component Two</h1>
            <button onClick={handleAddTask}>Add New Task</button>
            <ul>
                {tasks.map(task => (
                    <li key={task.id}>
                        {task.title} - {task.completed ? 'Completed' : 'Pending'}
                        {!task.completed && (
                            <button onClick={() => handleCompleteTask(task.id)}>Finish</button>
                        )}
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default MyComponentTwo;

更新TaskService组件

class TaskService {
    constructor() {
        this.tasks = [
            { id: 1, title: 'Buy Bread', completed: false },
            { id: 2, title: 'Learn ReactJS', completed: true },
            { id: 3, title: 'Do Exercises', completed: false },
        ];
        this.nextId = 4; // Start with the next ID to be used
    }

    getAllTasks() {
        return [...this.tasks]; // Return a copy of the array
    }

    addTask(title) {
        const newTask = {
            id: this.nextId++,
            title: title,
            completed: false
        };
        this.tasks.push(newTask);
    }

    completeTask(taskId) {
        const task = this.tasks.find(task => task.id === taskId);
        if (task) {
            task.completed = true;
        }
    }
}

export default TaskService;