📝

2重配列の型指定の値がobjectでもエラーにならなかったケースのメモ

2022/12/19に公開

原因を突き止めるのにしばらくかかったのでメモ。

事象

特定の動作をした時にreactのコンポーネントでundefined is not iterable というエラーがでていた。
配列ではない変数が与えられているのでループできませんよ、といわれている模様。
調べるとstoreの値がfoo[][]からfoo{}{}になっていることが原因。

コンポーネントの2重配列の型指定はエラーにならなかったので原因解明まで時間がかかりました。

component
interface Item {
id: number,
date: Date,
...省略
}

interface {
selectedItem: Models.Item[][];
}
// 親がuseSelectorでstoreの値を取得してpropsで渡している
export const Component: React.FC = props => {

 return (
    <>
      { props.selectedItem.map((item, i) => { // ← エラー:undefined is not iterable
      ....
      }
    </>
  );
};

原因

reduxでのデータ加工で、2重配列の値をmapメソッドでオブジェクト形式でreturnしていた。

NG

store(reducer)
...省略
   case SelectActionType: {
      return {
        ...state,
        selectItems: state.selectItems.map(item => {
          item = item.map(obj => {
              return { ...obj, selected: obj.id === action.payload };
            });
          return {...ref}; // ← 結果としてオブジェクトの入れ子構造になっていた
        }),
      };
    }

OK

store(reducer)
...省略
   case SelectActionType: {
      return {
        ...state,
        selectItems: state.selectItems.map(item => {
          item = item.map(obj => {
              return { ...obj, selected: obj.id === action.payload };
            });
          return [...item]; // ← 2重配列
        }),
      };
    }

入れ子の中はオブジェクトだったので流れでオブジェクトで記述してしまったようです…🙄

Discussion