ウェブサイト検索

reactjs - 行 0: 解析エラー: 未定義のプロパティ 'map' を読み取ることができません

私は現在クライアント側でサーバーを起動しており、上記のエラーが出続けています。私は TypeScript、ReactJS、ESLint を使用しています。このエラーがずっと出ているため、先に進むことができません。ESLint の GitHub ページもあまり役に立っていません。

このエラーは、私が useMutation コンポーネントを作成して index.ts にエクスポートした後に発生しました。このエラーをどうやって解消するかはわかりません。

以下は私のpackage.jsonです

    {
    "name": "tinyhouse_client",
    "version": "0.1.0",
    "private": true,
      "dependencies": {
      "@testing-library/jest-dom": "^4.2.4",
      "@testing-library/react": "^9.3.2",
      "@testing-library/user-event": "^7.1.2",
      "@types/jest": "^24.0.0",
      "@types/node": "^12.0.0",
      "@types/react": "^16.9.35",
      "@types/react-dom": "^16.9.0",
      "@typescript-eslint/parser": "^3.0.2",
      "react": "^16.13.1",
      "react-dom": "^16.13.1",
      "react-scripts": "3.4.1",
      "typescript": "~2.23.0"
      },
      "resolutions": {
     "@typescript-eslint/eslint-plugin": "^2.23.0",
     "@typescript-eslint/parser": "^2.23.0",
     "@typescript-eslint/typescript-estree": "^2.23.0"
     },
     "scripts": {
     "start": "react-scripts start",
     " build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
     },
     "eslintConfig": {
     "extends": "react-app"
     },
     "browserslist": {
     "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
      "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
     ]
     },
     **strong text** "proxy": "http://localhost:9000"
      }

以下は私の index.ts です

    export * from './server';
    export * from './useQuery';
    export * from './useMutation';

そして私の useMutation.ts

    import { useState } from 'react';
    import { server } from './server';

    interface State<TData> {
    data: TData | null;
    loading: boolean; 
    error: boolean;
    }

    type MutationTuple<TData, TVariables> = [
    (variables?: TVariables | undefined) => Promise<void>,
    State<TData>
    ];

    export const useMutation = <TData = any, TVariables = any>(
    query: string
    ): MutationTuple<TData, TVariables> => { 
    const [state, setState] = useState<State<TData>>({
    data: null,
    loading: false,
    error: false,
    })

    const fetch = async (variables?: TVariables) => {
    try {
      setState({ data: null, loading: true, error: false });

      const { data, errors } = await server.fetch<TData, TVariables>({ query, variables });
      if (errors && errors.length) {
        throw new Error(errors[0].message);
      }

      setState({ data, loading: false, error: false });
    } catch (err) {
      setState({ data: null, loading: false, error: true });
      throw console.error(err);
    }
   }

   return [fetch, state];
};

回答 #1

編集：黄孟原氏が指摘したように、この問題は react-scripts@^4.0.1 ではもはや発生しません。

このエラーは、react-scripts が @typescript-eslint/parser および @typescript-eslint/eslint-plugin の 2.xx 範囲に直接依存しているために発生します。

次のように、package.json に resolutions フィールドを追加することで、これを修正できます:

"resolutions": {
  "**/@typescript-eslint/eslint-plugin": "^4.1.1",
  "**/@typescript-eslint/parser": "^4.1.1"
}

NPMユーザー： 上記のresolutionsフィールドをpackage.jsonに追加してください。ただし、package-lock.jsonのパッケージバージョンを更新するにはnpx npm-force-resolutionsを使用してください。

Yarnユーザー：それ以上何もする必要はありません。詳細は選択的依存関係の解決を参照してください。

注意: monorepo/Yarnワークスペースを使用している場合、resolutions フィールドはトップレベルの package.json に存在する必要があります。

注意: yarn add および yarn upgrade-interactive は resolutions フィールドを無視するため、その結果、間違ったバージョンの yarn.lock ファイルが生成されることがあります。注意してください。

回答 #2

あなたのTypeScriptのバージョンは、eslintと互換性がありません。これら2つの依存関係を最新バージョンにアップグレードすることで修正できます。

TypeScript 4.0.5はバージョン4.6.0と互換性があります

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^4.6.0",
  "@typescript-eslint/parser": "^4.6.0",
}

TypeScript 4.1.5 はバージョン 4.18.0 と互換性があります

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^4.18.0",
  "@typescript-eslint/parser": "^4.18.0",
}

TypeScript 4.2.4 はバージョン 4.23.0 と互換性があります

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^4.23.0",
  "@typescript-eslint/parser": "^4.23.0",
}

TypeScript 4.3.2 はバージョン 4.25.0 と互換性があります

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^4.25.0",
  "@typescript-eslint/parser": "^4.25.0",
}

TypeScript 4.5.5 はバージョン 5.10.2 と互換性があります

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^5.10.2",
  "@typescript-eslint/parser": "^5.10.2",
}

TypeScript 4.6.2 はバージョン 5.15.0 と互換性があります

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^5.15.0",
  "@typescript-eslint/parser": "^5.15.0",
}

TypeScript 4.7.2 はバージョン 5.26.0 と互換性があります

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^5.26.0",
  "@typescript-eslint/parser": "^5.26.0",
}

TypeScript 4.9.5 はバージョン 5.56.0 と互換性があります

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^5.56.0",
  "@typescript-eslint/parser": "^5.56.0",
}

回答 #3

将来のグーグラーへ:

ついさっき、Vue.js 2 プロジェクトで TypeScript 4.0.2 を使っていて同じ問題が発生しました。私は @typescript-eslint/eslint-plugin と @typescript-eslint/parser を npm が提供する最新バージョンに @latest を使ってアップグレードすることで解決しました。その時点でのバージョンはそれぞれ 3.3.0 と 3.10.1 でした。

回答 #4

インターフェース内の変数型をいじってみてください。例えば、次のようなステートインターフェースのときにこのエラーが出ました:

interface State{
    foo: []
}

しかし、配列の型を変更したときは動作しました:

interface State{
    foo: string[]
}

回答 #5

これは私のCRAプロジェクトでうまくいった方法です。

ステップ1：package.json を編集し、typescript のバージョンを ^3.9.7 に設定します

ステップ2: node_modules 内の .cache フォルダーを削除する

ステップ3: npm install を実行

回答 #6

時々、このエラーは他の人が言ったように、無効な型が原因です

型として生の配列を使用したときにこのエラーが発生しました

const someVariable: [] //Incorrect
const someVariable: string[] //Correct

多次元配列を間違って入力したときにも、このエラーが出ました:

const someVariable : [string[]] //Incorrect. Results in map error

const someVariable : string[][] //Correct

TypeScriptからのエラーメッセージはかなり分かりにくいので、これが役立つことを願っています。

回答 #7

これは eslint-typescript から来ているのですか？もしそうなら、あなたの TypeScript のバージョンが開発版やナイトリービルドでないことを確認してください。

回答 #8

私も同じエラーが出ましたが、私の場合の修正は、型の一つに問題があったことでした

text : string[] | []

そしてそれをに変える

text : string[]

私にはうまくいった

関連記事