当我向状态添加新任务时出现问题，它被添加到所有项目的状态. 我怎么才能解决这个问题呢？每个项目都有自己的状态是必要的.

App.ts

const router = createBrowserRouter([
  {
    path: '/',
    element: <App/>,
  },
  {
    path: 'project/:projectId',
    element: <ProjectItems/>
  }
])

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <Provider store={store}>
    <RouterProvider router={router}/>
  </Provider>
);

ProjectItems.tsx

看起来你的帖子大部分都是代码；请添加更多细节.

const ProjectItems = () => {
    const { projectId } = useParams();

    const tasks = useAppSelector(state => state.task);
    const dispatch = useAppDispatch();

    useEffect(() => {
        localStorage.setItem('tasks', JSON.stringify(tasks))
    }, [tasks]);

    const addNewTask = () => {
        const newTask = {
            id: idGenerator(),
            title: prompt('')
        }
        dispatch(addTask({projectId, newTask}));
    }

    return (
        <div className={styles.Main}>
                <button onClick={addNewTask}></button>
        </div>
    )
}

export default ProjectItems;

Project.tsx

在这里我画了所有的项目，并挂在上面

interface IProject {
    id: string,
    title: string | null,
}

const Project: FC<IProject> = ({title, id}) => {
    const dispatch = useAppDispatch();

    const handleDeleteProject = () => {
        dispatch(deleteProject({id}));    
    }

    return (
        <div className={styles.Main}>
            <Link to={`project/${id}`}>
                <div className={styles.MainWrapper}>
                    {title}
                </div>
            </Link>
            <button onClick={handleDeleteProject}>Удалить</button>
        </div>  
    )
}

export default Project;

TaskReducer.tsx

看起来你的帖子大部分都是代码；请添加更多细节.

export enum TaskActions {
    ADD_TASK = 'ADD_TASK'
}

interface ITaskItem {
        id: string,
        title: string | null,
}

interface ITaskList {
    projectId: {
        tasks: ITaskItem[],
    }
}

interface IPayload {
    type: string,
    payload: {
        projectId: string,
        newTask: ITaskItem,
    },
}

const data = JSON.parse(localStorage.getItem('tasks') || '[]');

const initialState: ITaskList = {
        projectId: {
            tasks: data
        }
}

export const taskReducer = (state = initialState, action: IPayload) => {
    switch(action.type) {
        case TaskActions.ADD_TASK: {
            const { projectId, newTask } = action.payload;
            const newAddTasks = state.projectId.tasks;
            newAddTasks.push(newTask)
            return {
                ...state,
                [projectId]: {
                    ...state.projectId,
                    tasks: newAddTasks
                }
            }
        }
        default: return state;
    }
} 

ActionTask.tsx

import { TaskActions } from "../reducers/taskReducer"


export const addTask = (payload: any) => {     
    return {
        type: TaskActions.ADD_TASK,
        payload,
    }
}