「オブジェクトは 'undefined' である可能性があります。」を解消する(初級)

ReactでTypeScriptを使用しているときに起きた初歩的なエラー

• タグのデータをステートに格納する処理

(どこに間違いがあるのかお分かりの方はこの記事をここで読み終えていただいて構いません。)

// ステート①を用意
const [tagsData, setTagsData] = useState<tag[]>();
// ステート②を用意
const [tags, setTags] = useState<tags>([]);

// idが当てはまったタグのデータをステート②にプッシュ
for (let tag of tags) {
    const tagsFilterByTag = tagsData.filter((tag: any) => tag.id === tag);
    tags.push(tagsFilterByTag[0]);
  }

下から3行目のtagsDataで

const tagsData: tag[] | undefine
オブジェクトは 'undefined' である可能性があります。

と怒られる。

なぜ...

コードを上から再確認すると

！！！！！！！

// ステート①を用意
const [tagsData, setTagsData] = useState<tag[]>();

お分かりいただけただろうか。

useStateの引数に何も指定していないではないか。。

そこで

const [tagsData, setTagsData] = useState<tag[]>([]);

引数にArrayを入れておくとundefindではなくなった。
めちゃめちゃ初歩的なミスですが、今後もやらかしそうなので書いておきます。

ご意見、ご指導がございましたら順次ご対応させていただきます。

typescript初学者の参考になればと思います。