reactjs - Linija 0: Pogreška pri parsiranju: Ne može se pročitati svojstvo 'map' od undefined

Trenutno pokrećem server na klijentskoj strani, a greška gore je ono što dobivam. Koristim TypeScript, ReactJS, ESLint. Ne mogu nastaviti jer me ova greška proganja. GitHub stranica za ESLint također nije puno pomogla.

Ova je pogreška nastala nakon što sam stvorio komponentu useMutation i izvezao je u index.ts. Nisam siguran kako se riješiti ove pogreške.

Ispod je moj 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"
      }

Ispod je moj index.ts

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

I moja 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];
};

Odgovor #1

Uredi: kao što je primijetio Meng-Yuan Huang, ovaj problem više se ne pojavljuje u react-scripts@^4.0.1

Ova pogreška se pojavljuje jer react-scripts ima izravnu ovisnost o verziji 2.xx paketa @typescript-eslint/parser i @typescript-eslint/eslint-plugin.

To možete popraviti dodavanjem polja resolutions u vaš package.json na sljedeći način:

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

Korisnici NPM-a: dodajte polje resolutions iznad u svoj package.json, ali koristite npx npm-force-resolutions za ažuriranje verzija paketa u package-lock.json.

Korisnici Yarna: ne morate raditi ništa drugo. Pogledajte selektivno rješavanje ovisnosti za više informacija.

NAPOMENA: ako koristite monorepo/Yarn workspaces, polje resolutions mora biti u package.json datoteci na vršnoj razini.

NAPOMENA: yarn add i yarn upgrade-interactive ne poštuju polje resolutions i kao rezultat toga mogu generirati yarn.lock datoteku s netočnim verzijama. Pazite.

Odgovor #2

Vaša verzija TypeScripta nije kompatibilna s vašim eslintom. Možete to popraviti nadogradnjom ove dvije ovisnosti na najnoviju verziju.

TypeScript 4.0.5 je kompatibilan s verzijom 4.6.0

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

TypeScript 4.1.5 je kompatibilan s verzijom 4.18.0

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

TypeScript 4.2.4 je kompatibilan s verzijom 4.23.0

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

TypeScript 4.3.2 kompatibilan je s verzijom 4.25.0

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

TypeScript 4.5.5 kompatibilan je s verzijom 5.10.2

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

TypeScript 4.6.2 je kompatibilan s verzijom 5.15.0

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

TypeScript 4.7.2 je kompatibilan s verzijom 5.26.0

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

TypeScript 4.9.5 je kompatibilan s verzijom 5.56.0

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

Odgovor #3

Za buduće Googlere:

Upravo sam imao isti problem na TypeScript 4.0.2 u projektu Vue.js 2. Popravio sam ga nadogradnjom @typescript-eslint/eslint-plugin i @typescript-eslint/parser na najnovije verzije koje mi je npm dao koristeći @latest, što je u to vrijeme bilo 3.3.0 i 3.10.1, redom.

Odgovor #4

Pokušajte eksperimentirati s tipovima varijabli unutar sučelja. Npr., dobio sam ovu pogrešku kada sam imao ovakvo sučelje stanja:

interface State{
    foo: []
}

ali kad sam promijenio tip niza, uspjelo je:

interface State{
    foo: string[]
}

Odgovor #5

Ovo je ono što je djelovalo za moj CRA projekt.

Korak 1: uredite package.json i postavite verziju typescript na ^3.9.7

Korak 2: izbrišite mapu .cache u node_modules

Korak 3: pokrenite npm install

Odgovor #6

Ponekad je ova pogreška rezultat nevažećeg tipa, kako su drugi rekli

Dobio sam ovu pogrešku kada sam koristio golu polje kao tip

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

Također sam dobio ovu pogrešku kada sam pogrešno upisao višedimenzionalni niz:

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

const someVariable : string[][] //Correct

Poruka o pogrešci iz TypeScripta prilično je kriptična, pa se nadam da će ovo pomoći.

Odgovor #7

Dolazi li ovo od eslint-typescript? Ako da, provjerite da vaša verzija typescripta nije razvojna/noćna verzija.

Odgovor #8

Imao sam istu grešku, ali rješenje za mene bilo je da sam jedan od tipova imao kao

text : string[] | []

i mijenjajući to u

text : string[]

radilo je za mene

Povezani članci