'useState' 已定义但从未使用过即使我使用过 useState 钩子答案

【问题标题】：'useState' is defined but never used EVENTHOUGH I have used useState hook'useState' 已定义但从未使用过即使我使用过 useState 钩子
【发布时间】：2021-12-29 23:28:24
【问题描述】：

我有如下简单的功能组件。

import React, { useState } from 'react';
import { connect } from 'react-redux';
import JoinRoomInputs from '../../../components/JoinRoomPage/JoinRoomInputs/JoinRoomInputs';
import { State } from '../../../store/states/states';

interface Props {
    isRoomHost: boolean;
}

const JoinRoomContent = ({ isRoomHost }:Props) => {
    const [roomIdValue, setRoomIdValue] = useState('');
    const [nameValue, setNameValue] = useState('');
    return (
        <>
            <JoinRoomInputs roomIdValue={roomIdValue} setRoomIdValue={setRoomIdValue} nameValue={nameValue} setNameValue={setNameValue} isRoomHost={isRoomHost} />
        </>
    );
};

const mapStateToProps = (state:State) => {
    return {
        ...state
    }
}

export default connect(mapStateToProps)(JoinRoomContent);

如你所见，我在两行中使用了useState 钩子。但是这样说我会收到黄色警告。

src\components\JoinRoomPage\JoinRoomContent\JoinRoomContent.tsx
  Line 1:17:  'useState' is defined but never used  @typescript-eslint/no-unused-vars

Search for the keywords to learn more about each warning.

To ignore, add // eslint-disable-next-line to the line before.

更奇怪的是第17行是这个);

这对我来说没有任何意义。

我在这里做错了什么？

下面是我的 package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.6.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.9.1",
    "@types/node": "^12.20.36",
    "@types/react": "^16.14.20",
    "@types/react-dom": "^16.9.14",
    "@types/react-redux": "^7.1.20",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.1.6"
  },
  "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"
    ]
  },
  "devDependencies": {
    "typescript-plugin-css-modules": "^3.4.0"
  }
}

【问题讨论】：

你确定这不是一个陈旧的开发服务器/linter吗？您是否杀死了所有观察者和本地开发服务器并重新启动构建？
线索就在这条'Line 1:17:'中。您没有在第 1 行使用它。所以它可能与 useState 无关，而是与其他损坏的东西和一些奇怪的错误处理有关。真正的打字稿错误将为您提供正确的行位置。尝试剥离此组件以冒烟测试真正的错误。

标签： reactjs typescript react-redux react-hooks eslint

【解决方案1】：

使用以下命令重新启动服务器或终止端口：

sudo kill $(sudo lsof -t -i:PORT)

【讨论】：