ReactでTypescriptを使用した際、useStateのsetがundefined' の可能性があるオブジェクトを呼び出すことはできません。

Question

前提・実現したいこと

Contextを使用してboolean型のフラグ管理をしようと考えています

発生している問題・エラーメッセージ

TypeScript error in /src/components/Header.tsx(15,33):
Cannot invoke an object which is possibly 'undefined'.  TS2722

該当のソースコード

import { createContext, useState, FC } from "react";

type Props = {
    logoFlug: boolean,
    setLogoFlug: Function,
};
export const LogoFlugContext = createContext<Partial<Props>>(({}));


export const LogoFlugProvider: FC = props => {
    const { children } = props;
    
    const [ logoFlug, setLogoFlug ] = useState(false);

    return (
        <LogoFlugContext.Provider value={{ logoFlug, setLogoFlug }}>
            { children }
        </LogoFlugContext.Provider> 
    );
};

該当のソースコード

import { FC, useContext } from 'react';
import { LogoFlugContext } from '../providers/LogoFlugProvider';

export const Header: FC = () => {
    

    const { logoFlug, setLogoFlug } = useContext(LogoFlugContext);
    console.log(logoFlug);
    const onClickSwitch = () => setLogoFlug(!logoFlug);



    return (
        <header>
            <button onClick={onClickSwitch}>テスト</button>
        </header>
    );
};

補足情報

TypeScriptを使用しない場合動作することは確認しました。
LogoFlugProvider.tsxにtype Props = {
logoFlug: boolean,
setLogoFlug: Function,
};
を宣言しましたがvalue={{ logoFlug, setLogoFlug }}がなぜかsetLogoFlug?: Function | undefinedとなってしまい

Header.tsxでsetLogoFlugが使用できません。

Answer 1

パッと見で、エラーになる原因は、createContextのところで、Propsではなく、これのPartialを型パラメータに渡しているからっぽいです。なので

- export const LogoFlugContext = createContext<Partial<Props>>(({}));
+ export const LogoFlugContext = createContext<Props>({ logoFlug: flase, setLogoFlug: () => {} });

としてみたりすると、どうでしょう？

Comments

[hiromiromi]

解決しました！！
ありがとうございます。勉強不足でした

[退会済みユーザー]

????