ReactJS+Recoil导入atom时报TypeError: Object(...) is not a function问题

错误根源 #

你遇到的报错是atoms.js中atom的导入语法错误导致的：

• Recoil的atom属于命名导出API，不支持默认导入。你当前在atoms.js中写的import atom from 'recoil'实际导入的是整个Recoil模块对象，而非可执行的atom方法，将对象作为函数调用就会抛出TypeError: Object(...) is not a function错误。
• 补充：App.js中额外导入atom属于冗余代码，不影响运行但无实际作用，可以删除。

修复方案 #

1. 修正atoms.js的导入语法，将默认导入改为命名导入：

// 修正后的atoms.js完整代码
import { atom } from 'recoil';

export const textState = atom({
  key: 'textState', // 唯一ID，不能和其他atom/selector重复
  default: '', // 初始默认值
});

2. （可选优化）清理App.js的冗余导入：

// 修正后的App.js导入代码
import { useRecoilState } from 'recoil';
import { textState } from "./atoms"

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