时间戳

首页 > 解决方案 > 打字稿中的 useState 和 React.FC 问题

reactjs - 打字稿中的 useState 和 React.FC 问题

问题描述

我对 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;

尝试构建反应项目时产生以下错误：

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

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

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

npm 错误！代码 ELIFECYCLE npm 错误！errno 1 npm 错误！my-site@0.1.0 构建：react-scripts build npm 错误！退出状态 1 npm ERR！npm 错误！在 my-site@0.1.0 构建脚本中失败。npm 错误！这可能不是 npm 的问题。上面可能有额外的日志输出。

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

标签： reactjstypescriptreact-hooks

解决方案

您需要使用大写字母命名自定义组件。

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

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

<NameRandomizer/>

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

推荐阅读