Reactjs '；将新项目添加到类别'；上下文api减速器中的功能

请参考沙盒

我正在尝试创建一个“将项目添加到当前类别”的功能。这段代码的工作方式是，如果您添加一个名为“cars”的类别，例如，它将添加它，但下面也显示您要添加到当前类别中的项目。现在我有一个默认的val，上面写着“BMW”，a如何编写一个添加到特定类别的函数？我的

context/reducer.ts

中已经存储了一个“Add category”函数，理想情况下，我会在

Types.Additem

下使用页面底部的Additem函数来交付有效负载

这是我的密码：

减速机

type ActionMap<M extends { [index: string]: any }> = {
  [Key in keyof M]: M[Key] extends undefined
    ? {
        type: Key;
      }
    : {
        type: Key;
        payload: M[Key];
      };
};

export enum Types {
  Create = "CREATE_CATEGORY",
  AddItem = "ADD_ITEM"
}

type CategoryType = {
  id: number;
  title: string;
};

type CategoryPayload = {
  [Types.Create]: {
    id: number;
    title: string;
  };
  [Types.AddItem]: {
    id: number;
    subCategories: [any];
  };
};

export type CategoryActions = ActionMap<CategoryPayload>[keyof ActionMap<
  CategoryPayload
>];

export const categoryReducer = (
  state: CategoryType[],
  action: CategoryActions
) => {
  switch (action.type) {
    case Types.Create:
      // return current state if empty
      if (!action.payload) {
        return state;
      }
      // return current state if duplicate
      if (state.includes(action.payload)) {
        return state;
      }
      return [
        ...state,
        {
          id: Math.floor(Math.random() * 999999),
          title: action.payload,
          subCategories: ["BMW"]
        }
      ];
    case Types.AddItem:

    default:
      return state;
  }
};

export function AddCategory(category) {
  return { type: Types.Create, payload: category };
}

export function AddItem(id, value) {}

type ActionMap={
[Key in keyof M]：M[Key]扩展未定义
? {
类型：键；
}
: {
类型：键；
有效载荷：M[键]；
};
};
导出枚举类型{
Create=“Create_CATEGORY”，
AddItem=“添加项目”
}
类型类别类型={
id：编号；
标题：字符串；
};
类型CategoryPayload={
[类型.创建]：{
id：编号；
标题：字符串；
};
[类型.附加项]：{
id：编号；
子类别：[任何]；
};
};
导出类型CategoryActions=ActionMap[keyof ActionMap<
分类付款
>];
导出常量类别导出器=(
状态：类别类型[]，
行动：分类行动
) => {
开关（动作类型）{
案例类型。创建：
//如果为空，则返回当前状态
如果（！action.payload）{
返回状态；
}
//如果重复，则返回当前状态
if（状态包括（动作有效载荷））{
返回状态；
}
返回[
……国家，
{
id:Math.floor（Math.random（）*9999），
标题：action.payload，
子类别：[“宝马”]
}
];
案例类型.附加项：
违约：
返回状态；
}
};
导出函数AddCategory（类别）{
返回{type:Types.Create，有效负载：category}；
}
导出函数AddItem（id，value）{}

context.tsx

import React, { createContext, Dispatch, useReducer } from "react";
import { categoryReducer, CategoryActions } from "./reducer";

// Store Context is the global context that is managed by reducers.
type CategoryType = {
  id: number;
  title: string;
};

type InitialStateType = {
  categories: CategoryType[];
};

const initialState = {
  categories: []
};

const AppContext = createContext<{
  state: InitialStateType;
  dispatch: Dispatch;
}>({
  state: initialState,
  dispatch: () => null
});

const mainReducer = (
  { categories }: InitialStateType,
  action: CategoryActions
) => ({
  categories: categoryReducer(categories, action)
});

const AppProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(mainReducer, initialState);

  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
};

export { AppProvider, AppContext };

import React，{createContext，Dispatch，useReducer}来自“React”；
从“/reducer”导入{categoryReducer，CategoryActions}；
//存储上下文是由还原程序管理的全局上下文。
类型类别类型={
id：编号；
标题：字符串；
};
类型InitialStateType={
类别：类别类型[]；
};
常量初始状态={
类别：[]
};
const AppContext=createContext({
州：初始州，
分派：（）=>null
});
常量主减速器=(
{categories}:InitialStateType，
行动：分类行动
) => ({
类别：类别导出器（类别、动作）
});
const-AppProvider:React.FC=（{children}）=>{
const[state，dispatch]=useReducer（mainReducer，initialState）；
返回(
{儿童}
);
};
导出{AppProvider，AppContext}；

类别列表

import React, { useContext, useState } from "react";
import { AppContext } from "../Context/context";
import "../css/Main.scss";
import pen from "../images/pen.png";
import plus from "../images/plus.png";
import { AddItem } from "../Context/reducer";

interface CategoryProps {
  id: number;
}

function CategoryList() {
  const { state, dispatch } = useContext(AppContext) || [];

  const handleAdd = (props: CategoryProps) => {
    const { id } = props;
    let add = prompt("Enter new item name");

    if (add != null) {
      dispatch(AddItem(id, add));
    }
  };

  console.log(state);

  return (
    <div className="container">
      {state.categories.map(category => {
        return (
          <div key={category.id}>
            <div className="title">
              <strong>{category.title}</strong>
              <input
                type="image"
                alt="Edit your todo"
                src={pen}
                title="Edit todo"
              />
              <input
                type="image"
                alt="add to category"
                src={plus}
                title="Add to category"
                onClick={() => handleAdd(category.id)}
              />
            </div>
            <ul>
              <li>{category.subCategories || [].map(item => item)}</li>
            </ul>
          </div>
        );
      })}
    </div>
  );
}

export default CategoryList;

import React，{useContext，useState}来自“React”；
从“./Context/Context”导入{AppContext}；
导入“./css/Main.scss”；
从“./images/pen.png”导入笔；
从“./images/plus.png”导入plus；
从“./Context/reducer”导入{AddItem}；
接口类别Props{
id：编号；
}
函数类别列表（）{
const{state，dispatch}=useContext（AppContext）| |[]；
const handleAdd=（道具：CategoryProps）=>{
const{id}=props；
让添加=提示（“输入新项目名称”）；
如果（添加！=null）{
调度（AddItem（id，add））；
}
};
console.log（状态）；
返回(
{state.categories.map（category=>{
返回(
{category.title}
handleAdd（category.id）}
/>

{category.subCategories | |[].map（item=>item）}

);
})}
);
}
导出默认类别列表；

如果没有到第三方网站的外链接，这个问题就无法独立解决，它会受到链接损坏的影响，在这种情况下可能变得毫无意义。请在问题正文中提供与您的问题相关的所有详细信息，包括相关代码。@spender完成，我已更新了我的问题