Truffle React Box将App类组件转函数组件后出现Hook调用错误

问题根因排查优先级 #

1. 导出导入语法不匹配（最高概率） #

你在NavbarElements.js中对Nav使用的是命名导出：

export const Nav = styled.nav`
    background: #000;
`;

但在Navbar.js中用了默认导入的语法：

import Nav from './NavbarElements';

命名导出的变量必须用大括号包裹导入，正确写法应该是：

import { Nav } from './NavbarElements';

导入错误会导致你拿到的Nav是undefined，渲染非法组件时React的报错栈会指向最近的Hook执行点（也就是你代码里的setState行），属于典型的报错误导。

2. 缺失styled-components项目依赖 #

你提供的package.json依赖列表中没有styled-components，如果这个包只安装在全局环境、或者通过npm link引入，会导致styled-components加载了全局的React 17.0.2副本，和你项目内的React 16.11.0产生冲突，对应报错提示里的「同一应用存在多份React副本」的场景。
修复方式：在项目根目录执行：

npm install styled-components --save

安装完成后删除node_modules和package-lock.json重新执行npm install安装依赖，排除多版本冲突。

3. 全局与项目React版本冲突 #

你全局安装的React版本是17.0.2，项目内用的是16.11.0，执行npm命令时优先用项目内的可执行文件，避免调用全局版本产生异常，比如启动项目用：

npx react-scripts start

而不是直接调用全局的react-scripts命令。

内容的提问来源于stack exchange，提问作者Joncarre