Reactで配下コンポーネントに値を渡したらデータにアクセスができずprototypeメソッドも呼び出せない

前提

Reactでとあるゲームに基づいたSPAを開発しています。
キャラクターのデータを用いてダメージ計算等を行うためのアプリで、キャラクターの膨大なデータは個別のJSファイルに変数として格納し、exportしたそれをもとに描画等を予定しています。
キャラクターデータ自体は配列として生成し、中にキャラごとのデータをまとめたオブジェクトが入っています。

JavaScript

const profile = [ { "name": {"en": "test", "ja": "テスト"} ... }, {同様のデータ}, ...];export default profile;

またContextオブジェクトを用いて値を引き渡す、受け取るのも考えましたがuseContexでエラーが出るため断念しました。

実現したいこと

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

Uncaught TypeError: profile.map is not a function

元のデータは配列なのでmapメソッドを呼び出そうとしたら上気のエラーが出ました。
データ自体をconsole.logすると中身が入っているが、protptypeメソッドや各キーに割り当てられているオブジェクトを呼び出すとundefinedになる。
Array.isArray(profile)ではfalseが、profile.prototypeはundefinedが帰ってくる。
データをimportしたコンポーネントではisArrayもtrueで、各キーにアクセスもできるため、コンポーネントへ引き渡されて以降アクセスとprototypeメソッド呼び出しができない。

該当のソースコード

JavaScript

import React from "react"; function Select (profile) { return ( <select> {profile.map((ope,i) => ( <option key={i} value={ope.name.en}>{ope.name.ja}</option> ))} </select> );};

試したこと

実際にデータを使用する階層のコンポーネントで、先に空の配列を代入した変数を作り、そこに上から受け取ったデータを代入する。
→結果は変わらない。undefinedとmap is not functionが帰ってくる。

前提の項目で上述した通りContextオブジェクトを介してuseContext、Consumerコンポーネントで値を受け取ろうとした。
→Contextオブジェクトの生成はできているけどuseContext(<Contextオブジェクト>)でもundefinedが帰ってくるため断念

Reactのバージョンによって生じる問題かとも思ってドキュメントに触れたものの該当バージョンで今回の件に該当しそうな項目はなさそうだった。

補足

パッケージの一覧です。
├── @testing-library/jest-dom@5.16.4
├── @testing-library/react@13.3.0
├── @testing-library/user-event@13.5.0├── react-dom@18.2.0
├── react-scripts@5.0.1
├── react@18.2.0
└── web-vitals@2.1.4

コメントを投稿

0 コメント