ホーム>source

setState を渡す方法について私の以前の投稿でメンバーの提案の後コンテキストAPIの子に、私はこのコードを持っています:

<前>ウィズウィズ

子供にコンテキストを使用して、このようなことを試みると

<前>ウィズウィズ

エラーが発生します:

ウィズウィズ

そして私はこれをしなければなりません:

<前>ウィズウィズ

その後 ウィズウィズ(なし?nullになる可能性があります)

私がしなければならないこと?ありがとう

export interface IShowProviderProps { shows: IShow[]; setShows: (currentShows: IShow[], shows: IShow[]) => void; sort: string; setSort: (sort: string) => void; query: string; setQuery: (sort: string) => void; showType: string; setShowType: (sort: "movie" | "tv") => void; page: number; setPage: (page: number) => void; } export const ShowContext = createContext<IShowProviderProps | null>(null); export const ShowProvider = ({ children }: Props): JSX.Element => { const [shows, setShows] = useState<IShow[]>([]); const [sort, setSort] = useState<string>("popularity.desc"); const [query, setQuery] = useState<string>(""); const [showType, setShowType] = useState<"movie" | "tv">("movie"); const [page, setPage] = useState<number>(1); const providerValue: IShowProviderProps = { shows, setShows, sort, setSort, query, setQuery, showType, setShowType, page, setPage }; return <ShowContext.Provider value={providerValue}>{children}</ShowContext.Provider>; export const useShows = () => useContext(ShowContext);
あなたの答え
  • 解決した方法 # 1

    私はTypeScriptを使用していないので、私の答えはあまり正確ではないかもしれませんが、この行

    <前>ウィズウィズ

    問題を修正します。問題は、 const ShowContext = React.createContext<IShowProviderProps>({} as IShowProviderProps); 以降  できる ウィズウィズ 、TSコンパイラは providerValues   null が必要 、それは明らかにしません。

    ロジックに問題はありません。私は null と思います   shows を渡したときにTSコンパイラをサイレントに保つための回避策でした  初期値として。

    すべてのコードをコードサンドボックスにドロップしました。これを確認してください。すべて機能しています。

    ところで私は IShowProviderProps | null を信じています   null の間違った署名です 。 setShows: (currentShows: IShow[], shows: IShow[]) => void; である唯一の引数を取ります  または setShows 、ただし2つではありません。

  • 解決した方法 # 2

    ここでの問題は、コンテキストの値タイプが IShow 間の和集合であるということです  そして IShow => IShow

    <前>ウィズウィズ

    したがって、TypeScriptはコンテキストの値を潜在的に IShowProviderProps であると見なします  (デフォルトでは) null のフィールドにアクセスしようとすると、デフォルトでコンパイルエラーが報告されます  値:

    <前>ウィズウィズ

    ここでの1つの解決策は、コンテキストの値タイプを /* The "IShowProviderProps | null" means that the value can be of type IShowProviderProps or type null */ export const ShowContext = createContext<IShowProviderProps | null>(null); として定義することです。 :

    <前>ウィズウィズ

    その変更により、TypeScriptはコンテキスト値が常にタイプ null として定義されていると推定するため、実行時のコンテキスト値の「nullチェック」の必要性を判断できます。 。

    これらの変更を機能させるには、TypeScriptの「厳密モード」が無効になっていることを確認する必要があります。これは、 null を確保することで実行できます。   /* Obtain context value - note that the value type is for this is IShowProviderProps | null, which means TypeScript sees showsValue as being potentially null */ const showsValue = useShows(); /* TypeScript won't allow access to shows, setShows, on a nullable value */ const {shows, setShows} = showsValue; に存在します  あなたのプロジェクトの IShowProviderProps  ファイル:

    <前>ウィズウィズ

    お役に立てば幸いです。

    /* Removing "| null" causes TypeScript to now consider the value type of ShowContext to be non-nullable, ie always defined */ export const ShowContext = createContext<IShowProviderProps>(null);

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ continuous integration - 多くのプロジェクトをビルドするときに、誤ったCIビルドの失敗を防ぐにはどうすればよいですか?