web-dev-qa-db-ja.com

React TS useContext useReducerフック

このコードのタイプエラーが何であるか理解できません

import React from 'react';

interface IMenu {
  items: {
    title: string,
    active: boolean,
    label: string
  }[]
}


type Action =
  | { type: 'SET_ACTIVE', label: string }

const initialState: IMenu = {
  items: [
    { title: 'Home', active: false, label: 'home' },
    { title: 'Customer', active: false, label: 'customer' },
    { title: 'Employee', active: false, label: 'employee' },
    { title: 'Report', active: false, label: 'report' },
  ]
}

const reducer = (state: IMenu = initialState, action: Action) => {
  switch (action.type) {
    case 'SET_ACTIVE': {
      const label = action.label;
      const items = state.items.map((item) => {
        if (item.label === label) {
          return { ...item, active: true };
        }
        return { ...item, active: false }
      })
      return { items }
    }
    default:
      throw new Error();
  }
};

export const MenuContext = React.createContext(initialState);
export const MenuConsumer = MenuContext.Consumer;

export function MenuProvider(props: any) {
  const [state, dispatch] = React.useReducer(reducer, initialState)
  const value = { state, dispatch };
  console.log(value)
  return (
    <MenuContext.Provider value={value}>
      {props.children}
    </MenuContext.Provider>
  )
}

私が受け取るエラーはこれです

    /Volumes/Tarang External/react-context-TypeScript/src/context/index.tsx
TypeScript error in /Volumes/Tarang External/react-context-TypeScript/src/context/index.tsx(49,27):
Property 'items' is missing in type '{ state: { items: { active: boolean; title: string; label: string; }[]; }; dispatch: Dispatch<{ type: "SET_ACTIVE"; label: string; }>; }' but required in type 'IMenu'.  TS2741

    47 |   console.log(value)
    48 |   return (
  > 49 |     <MenuContext.Provider value={value}>
       |                           ^
    50 |       {props.children}
    51 |     </MenuContext.Prov

誰かが正確に私が間違っていることを指摘するのを手伝ってくれる？ TypeScriptは初めてなので、必要に応じてガイドしてください。状態のコンテキスト値を渡して子コンポーネントにディスパッチしようとしています。何が起こっているのかわかりません。これは、useContextおよびuseReducerフックを実装する正しい方法でもありますか？

reactjstypescripttypesreact-hooks
3
Tarang Hirani

問題は、コンテキストがinitialStateと同じタイプであると想定されていることですが、代わりに、コンテキストのデフォルト値を{ state, dispatch }に設定します。

これは誤りです。

解決するには、コンテキストのデフォルトタイプを{ state, dispatch }に設定します（これがあなたの望みのとおりだと思いますまたはコンテキストのデフォルトタイプをtypeof initialStateに設定します。

これが ソリューション です。

1
Tejas