0

我有一个组件如下。

import React, { SetStateAction } from 'react';

interface ColorObject {
  name: string,
  slug: string,
  hex: string,
}

interface Props {
  color: ColorObject
  onClick: React.Dispatch<SetStateAction<ColorObject>>,
}

const Color: React.FC<Props> = (props) => {
  const { color, onClick } = props;
  const selectColor = () => {
    onClick(color);
  };
  return (
    <button type="button" className="color" onClick={selectColor}>
      <div className="block" style={{ backgroundColor: color.hex }} />
      <p className="color-label">{color.name}</p>
    </button>
  );
};

export default React.memo(Color);

一切正常，但SetStateAction导入语句中的红色灯显示以下错误。

'SetStateAction' 已定义但从未使用过。eslint（没有未使用的变量）

但是，正如您所看到的，我在 Props 界面中使用它。在不替换上述界面中的SetStateActionwith的情况下，我该如何克服这个问题。React.SetStateAction

下面是我的 .eslintrc.json 文件。

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
        "react/jsx-filename-extension": [
            1,
            {
                "extensions": [
                    ".tsx",
                    ".ts"
                ]
            }
        ],
        "import/extensions": [
            "error",
            "ignorePackages",
            {
                "js": "never",
                "mjs": "never",
                "jsx": "never",
                "ts": "never",
                "tsx": "never"
            }
        ],
        "react/prop-types": 0
    },
    "settings": {
        "import/resolver": {
            "node": {
                "extensions": [
                    ".js",
                    ".jsx",
                    ".ts",
                    ".tsx"
                ]
            }
        }
    }
}

我使用了 eslint --init 并选择了 airbnb 风格指南。在选择中也选择打字稿。

4

2 回答 2

1

您是否尝试在规则中添加类似的内容？

"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": ["error"]

你可以在这里找到选项

于 2020-07-16T07:21:55.213 回答
0

而不是使用eslint-config-airbnb，考虑使用eslint-config-airbnb-typescript：https ://www.npmjs.com/package/eslint-config-airbnb-typescript

基本的 airbnb 配置是为纯 JS 代码构建的，并且不启用能够理解 typescript 的规则。

如果您想继续使用该配置，则必须像@Sgh 提到的那样在本地对您的配置进行手动调整。

于 2020-07-31T19:54:04.860 回答