如何使用 Typescript 将对象传递给子自定义 React 功能组件

Question

感谢您花时间阅读本文。

我正在尝试使用带有 AirBnB 配置的 eslint 来学习 Typescript。像映射对象数组和为每个对象创建自定义功能组件这样简单的事情给我下一个错误：

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

这是父组件 ProductGrid：

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;

这是子组件产品：

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;

以及类型声明：

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;
}

我也有一个 .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
      }
    ],
  }
}

和 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"]
}

我已经创建了 this codesandbox 但当然，lint 错误并没有出现在那里，我在 VsCode.

中编写代码

有什么帮助吗？因为这在 javascript.

中非常标准

Answer 1

我可以通过查看错误消息来判断问题所在：

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

这表示您在 products.map() 中使用的地图函数的类型为 (product: ProductType) => JSX.Element。它说这不是您的 products 数组的有效映射器，因为 products.map() 需要 (value: object, index: number, array: object[]) => Element.

类型的映射函数

为什么要这样？
此错误意味着您实际代码中的 products 变量的类型为 object[]。您正在尝试通过在 map() 中使用 (product: ProductType) 来弥补这种模糊类型，但这不会起作用。在此处键入参数意味着您的 map 函数只能处理 ProductType 类型的对象，但它需要处理任何 object 因为 products 是 object.[=29 的数组=]

您需要做的是让您的 products 变量具有 ProductType[] 类型。我认为您是从实际代码中的 API 获取这些数据的？所以确保 API 调用 returns ProductType[] 而不是 object[].

作为快速修复，您可以在映射数组之前声明数组的类型，但最好从源头解决问题。

{(products as ProductType[]).map((product) => (
  <Product key={product.id} product={product} />
))}

如何使用 Typescript 将对象传递给子自定义 React 功能组件

How pass an object to a child custom React functional component with Typescript

reactjs

typescript

eslint

eslint-config-airbnb