Help us understand the problem. What is going on with this article?

React NativeのFlatListのdataに型エラーが出ているとき

はじめに

dataにデータを渡してアプリでも問題なく動いていることを確認してふとみるとdataに赤線が。
どうやら型エラーが出ているようなので、とりあえずググるもみんなrenderItemについての
ことばっかりだったので、解決法を残しておく。

結論

型データに配列宣言が足りない

今回の事例

dataという大本に、characterというデータがある
characterの中にはstatusというデータがある
そして、FlatListで、characterの数だけ表示したい

const characters = useSelector((state: State) => state.data.characters);
<FlatList
  data={characters}
  renderItem={({ item }) => (
    <ListContents
      なんかいろいろ
    />
  )}
  keyExtractor={(item, index) => index.toString()}
/>

そして、このdataに型エラーがでていた。
どうやら配列でいれろとのこと。
しかし、console.logでデータを見てもちゃんと配列が入っている。
はて?

型宣言の間違い

Character型の宣言(Status型が別ファイルに設定されています)

import { Status } from './status';

export type Characters = {
  status: Status;
};

Data型の宣言

import { Characters } from './characters';

export type Data = {
  characters: Characters;
};

おそらく、このあたりに間違いがあるとみていろいろ試した結果、これが正しかった

import { Characters } from './characters';

export type Data = {
  characters: Characters[];   // ←ここでcharacterの配列宣言をする
};

要は、「Data型は複数のCharacterを持つから、配列宣言をしておく」ということらしい。
これが、変更前は「Data型はひとつのCharacterを持つ」という宣言のはずが、FlatListの
dataに入れていたため、そもそも複数ならば配列を入れよ、ということみたい。
これがJSだったら気付かずそのままだったけど、TSのおかげで本当の正しい形が分かったのは
よかったけどたどり着くのに地味に時間がかかった。。

krile136
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした