问题描述:
I'm currently authoring a package called
eformless
I've used CRA to create a directory called
sandbox
, where I linked the package.I keep getting the following error, when trying to launch the sandbox react app with the linked package that I'm trying to test:
// inside my 'sandbox' App.tsx import React from 'react' import { useField } from 'eformless' const App = () => { const [test, handleChange] = useField('testing') return ( <input type="text" value={test.value} onChange={handleChange} /> ) }
1.您可能有不匹配的React和渲染器(例如React DOM)版本 2.您可能正在违反Hooks规则 3.您可能在同一个应用程序中有多个React副本
请参见由于stackoverflow ToS而更改的链接,了解如何调试和解决此问题。
发生问题的位置:
问题似乎指向我的库,在那里我编写了一个使用从React导入的hooks的自定义hook。 以下是代码中有问题的摘录:
export const useField = <T>(
input: T
...checkFunctions: Array<(...args: unknown[]) => unknown>
): [FieldType<T>, FieldHandlerFunction<T>, FieldHandlerFunction<T>] => {
const [value, setValue] = useState(input)
const [name, setName] = useState('')
// Issue seems to be here ^
}
我的设置相当正常,在其他项目中似乎运行良好:
- 首先通过
rollup -c
捆绑我的库 - 通过
npm link
在我的eformless
库文件夹内创建一个链接 - 并通过
npm link eformless
在我的sandbox
文件夹内创建符号链接
我尝试过的:
我自然而然地尝试通过错误消息中提供的链接来修复问题。如此处所述,这似乎是在链接自己的库时出现的问题。
这个问题也可能出现在使用npm link或其等效物时。在这种情况下,您的打包器可能会“看到”两个React——一个在应用程序文件夹中,一个在您的库文件夹中。假设myapp和mylib是兄弟文件夹,一种可能的解决方法是从mylib运行npm link ../myapp/node_modules/react。这应该使库使用应用程序的React副本。
我确实在我的eformless
文件夹中运行了npm link ../sandbox/node_modules/react
,但即使在关闭节点服务器和重新编译后,这似乎也没有帮助。
无论如何,这对我来说似乎非常令人困惑,因为运行npm ls react
只显示一个版本的react,并且应该是有效的,因为useState
在自定义钩子的顶层使用。
重现问题:
两个存储库都是公共的
.gitignore
中。至于devDependencies -> peerDependencies
,我认为你可能是对的。忘记了这一点,给我一秒钟。 - Samuel Hulla