I dziękuję za czas za czytanie tego.

Próbuję nauczyć się maszynopis: Reaguj za pomocą EsLint z Config Airbnb. Coś tak prostego jak mapowanie tablicy obiektów i tworzenie niestandardowego komponentu funkcjonalnego z każdym daje mi następny błąd:

Argument of type '(product: ProductType) => JSX.Element' is not assignable to parameter of type '(value: object, index: number, array: object[]) => Element'.

Oto produkt składnik rodzicielskiGRID:

const ProductGrid: React.FC = () => {
  const products = [
    {
      id: "string1",
      name: "string1",
      price: {
        formatted_with_symbol: "string1"
      },
      description: "string1",
    },
    ...
  ];

  return (
    <div>
      <Grid container spacing={3}>
        <Grid item xs={12} md={6} lg={4}>
          {products.map((product: ProductType) => (
            <Product key={product.id} product={product} />
          ))}
        </Grid>
      </Grid>
    </div>
  );
};

export default ProductGrid;

Oto produkt składowy dla dzieci:

const Product: React.FC<ProductTypeAsProps> = ({product}: ProductTypeAsProps) => {
 const [loading, setLoading] = useState(true);
 setTimeout(() => {
      setLoading(false);
    }, 3000);
  
  return (
    <Box className="product">
      <Card className="card">
        <CardContent className="content">
          {loading ? (
            <div className="skeleton">
              <Skeleton
                variant="text"
                animation="wave"
                component="h2"
                width="65%"
              />
            </div>
          ) : (
            <div>
              <p>{product.name}</p>
              <p>{product.description}</p>
              <p>{product.price.formatted_with_symbol}</p>
            </div>
          )}
        </CardContent>
      </Card>
    </Box>
  );
};

export default Product;

I deklaracja typów:

export type ProductType = {
  id: string;
  name: string;
  price: {
    formatted_with_symbol: string;
  };
  description: string;
  assets: [
    {
      id: string;
      filename: string;
      url: string;
    }
  ];
};

export interface ProductTypeAsProps {
  product: ProductType;
}

Mam też .eslintrc:

{
  "extends": ["airbnb-typescript", "react-app", "prettier"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "project": "tsconfig.json"
  },
  "plugins": ["prettier", "@typescript-eslint", "react-hooks"],
  "settings": {
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true
      }
    }
  },
  "rules": { 
    "@typescript-eslint/no-explicit-any": [
      "error",
      {
        "ignoreRestArgs": true
      }
    ],
  }
}

I tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es6", "dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noImplicitAny": false
  },
  "include": ["src"]
}

Utworzyłem Ten kodesandbox Oczywiście, że błąd Lint nie pojawia się tam, koduję to w Vscode.

Jakieś pomocy? Bo to jest dość standard w JavaScript.

0
CodeAlga 15 kwiecień 2021, 13:26

1 odpowiedź

Najlepsza odpowiedź

Mogę powiedzieć, jaki jest problem, patrząc na komunikat o błędzie:

Argument typu "(produkt: ProductType) => jsx.Element 'nie jest przypisany do parametru typu" (wartość: obiekt, indeks: numer, tablica: obiekt []) => element ".

Mówi to, że funkcja mapy, której używasz w products.map() jest typu (product: ProductType) => JSX.Element. Mówi, że nie jest to prawidłowy Mapper dla tablicy products, ponieważ products.map() oczekuje funkcji mapy typu (value: object, index: number, array: object[]) => Element.

Dlaczego tego oczekuje?

Ten błąd oznacza, że zmienna products w rzeczywistym kodzie ma typ object[]. Próbujesz nadrobić tego niejasnego typu, używając (product: ProductType) wewnątrz twojego map(), ale nie zadziała. Wpisanie argumentu tutaj oznacza, że funkcja mapy może obsługiwać tylko obiekty typu ProductType, ale musi obsługiwać dowolne object, ponieważ products jest tablicą object.

Zamiast tego musisz zrobić tak, aby zmienna products ma typ ProductType[]. Myślę, że otrzymujesz te dane z interfejsu API w rzeczywistym kodzie? Upewnij się, że włączenie API zwraca ProductType[] zamiast object[].

Jako szybka poprawka możesz zapewnić typ tablicy przed jej mapowaniem, ale zawsze lepiej jest rozwiązać problem na źródle.

{(products as ProductType[]).map((product) => (
  <Product key={product.id} product={product} />
))}
0
Linda Paiste 15 kwiecień 2021, 18:40