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

谢谢你花时间阅读这篇文章

我正在尝试使用eslint和AirBnB配置学习react的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;

我还有一个.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"]
}

我已经创建了，但是当然，lint错误没有显示在这里，我正在用VsCode编码

---

需要帮忙吗？因为这在javascript中是相当标准的。

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

类型为“（product:ProductType）=>JSX.Element”的参数不能分配给类型为“（值：object，索引：number，数组：object[]）=>Element”的参数

这表示您在

products.map（）中使用的map函数类型为
（product:ProductType）=>JSX.Element
。它表示这不是
产品
数组的有效映射程序，因为
产品.map（）
需要类型为
的映射函数（值：object，索引：number，数组：object[]）=>元素

为什么它会想到这一点？

此错误表示实际代码中的
products
变量的类型为
object[]
。您试图通过在
映射（）中使用
（product:ProductType）
来弥补这种模糊类型，但这不起作用。在这里输入参数意味着map函数只能处理
ProductType
类型的对象，但它需要处理任何
对象，因为
products
是
对象的数组

您需要做的是使
products
变量的类型为
ProductType[]
。我认为您是从实际代码中的API获取这些数据的？因此，请确保API调用返回的是
ProductType[]
，而不是
object[]

作为一种快速修复方法，您可以在映射数组之前断言它的类型，但最好在源位置解决问题

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

{（产品作为ProductType[]）.map（（产品）=>(
))}
我应该提到，这是从commerce.js中提取的，这意味着我从后端接收的
产品
对象要大得多，但到目前为止，我只使用类型化属性。我相信这没关系。你是一个神圣的天才！！！我仍然难以理解这些错误的含义。你是在后端类型的点。我正在使用redux，因此我有一个初始状态的本地类型，即产品确实是一个
对象[]
，后来我定义了实际的ProductType。感谢@LindaPaiste让事情变得如此清晰！！：D
{
  "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"]
}

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