打字稿中的 useState 和 React.FC 问题答案

【问题标题】：Issue with useState and React.FC in typescript打字稿中的 useState 和 React.FC 问题
【发布时间】：2021-03-17 12:56:13
【问题描述】：

我对 typescript 很陌生，已经有一段时间是一个肮脏的 JS 开发人员，但我遇到了一个没有任何意义的错误。本质上，编译器似乎告诉我我在功能组件或自定义挂钩之外使用 useState，但我的组件的 TS 定义是 React.FC。任何了解实际情况的帮助都会很好。

nameRandomizer.tsx 的全部内容在这里：

import React, { useState } from 'react';
const nameRandomizer: React.FC = () => {
  const [inputWords, setInputWords] = useState<string>('Test Text');

  return (
    <div className="NavFlexItemStatic">{inputWords}</div>
  );
};

export default nameRandomizer;

在尝试构建 react 项目时产生以下错误：

正在创建优化的生产版本... 编译失败。

./src/navigation/nameRandomizer.tsx 第 3:39 行：React Hook "useState" 在函数 "nameRandomizer: React.FC" 中被调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数 react-hooks/rules-of-hooks

搜索关键字以了解有关每个错误的更多信息。

npm 错误！代码生命周期 npm 错误！错误号 1 npm 错误！我的站点@0.1.0 构建：react-scripts build npm 错误！退出状态 1 npm 错误！ npm 错误！在 my-site@0.1.0 构建脚本中失败。 npm 错误！这可能不是 npm 的问题。上面可能还有额外的日志输出。

npm 错误！可以在以下位置找到此运行的完整日志： npm 错误！ /Users/william/.npm/_logs/2020-12-05T19_18_29_436Z-debug.log

【问题讨论】：

标签： reactjs typescript react-hooks

【解决方案1】：

你need to name custom components with an upper case。

组件名称也应始终以大写字母开头（<Wrapper/> 而不是<wrapper/>）。

const NameRandomizer: React.FC = () => {
  ...
};

<NameRandomizer/>

目前，linter 认为您从一个简单的函数（如错误状态）调用了一个钩子，这会导致构建过程失败。

【讨论】：