node.js - Web 开发新手不知道如何修复 reactjs 错误
问题描述
这是一页很长的错误信息，我已经 2 周无法联系到教这门课的人了。我尝试重做它，但我仍然收到相同的消息，我不知道如何或做什么来修复它们。这是 git hub 链接：https ://github.com/SadiaSanam/petshop
这些是消息，我该如何解决？因为其中一些页面我什至找不到..
TypeError: path.split is not a function get C:/Users/sadia/OneDrive/SheCodes/Full stack/app/src/utils/get.ts:6
TypeError: path.split is not a function
get
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/src/utils/get.ts:6
3 | import isUndefined from './isUndefined';
4 |
5 | export default (obj: any = {}, path: string, defaultValue?: unknown) => {
> 6 | const result = compact(path.split(/[,[\].]+?/)).reduce(
7 | (result, key) => (isNullOrUndefined(result) ? result : result[key]),
8 | obj,
9 | );
View compiled
(anonymous function)
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/src/useForm.ts:967
964 |
965 | const register: UseFormRegister<TFieldValues> = React.useCallback(
966 | (name, options) => {
> 967 | const isInitialRegister = !get(fieldsRef.current, name);
| ^ 968 |
969 | set(fieldsRef.current, name, {
970 | _f: {
View compiled
Login
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/src/components/Login.js:88
85 | <div className='form-control'>
86 |
87 | <label htmlFor='email'>Email</label>
> 88 | <input type='email' name='email' id='email' ref={register( {required:true}) } />
| ^ 89 | { errors.email ? <span className='err'> email is required!</span> : null }
90 |
91 | <label htmlFor='password'>Password</label>
View compiled
renderWithHooks
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:14985
14982 | }
14983 | }
14984 |
> 14985 | var children = Component(props, secondArg); // Check if there was a render phase update
| ^ 14986 |
14987 | if (didScheduleRenderPhaseUpdateDuringThisPass) {
14988 | // Keep rendering in a loop for as long as render phase updates continue to
View compiled
mountIndeterminateComponent
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:17811
17808 |
17809 | setIsRendering(true);
17810 | ReactCurrentOwner$1.current = workInProgress;
> 17811 | value = renderWithHooks(null, workInProgress, Component, props, context, renderLanes);
| ^ 17812 | setIsRendering(false);
17813 | } // React DevTools reads this flag.
17814 |
View compiled
beginWork
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:19049
19046 | switch (workInProgress.tag) {
19047 | case IndeterminateComponent:
19048 | {
> 19049 | return mountIndeterminateComponent(current, workInProgress, workInProgress.type, renderLanes);
| ^ 19050 | }
19051 |
19052 | case LazyComponent:
View compiled
HTMLUnknownElement.callCallback
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:3945
3942 | function callCallback() {
3943 | didCall = true;
3944 | restoreAfterDispatch();
> 3945 | func.apply(context, funcArgs);
| ^ 3946 | didError = false;
3947 | } // Create a global error event handler. We use this to capture the value
3948 | // that was thrown. It's possible that this error handler will fire more
View compiled
invokeGuardedCallbackDev
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:3994
3991 | // errors, it will trigger our global error handler.
3992 |
3993 | evt.initEvent(evtType, false, false);
> 3994 | fakeNode.dispatchEvent(evt);
| ^ 3995 |
3996 | if (windowEventDescriptor) {
3997 | Object.defineProperty(window, 'event', windowEventDescriptor);
View compiled
invokeGuardedCallback
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:4056
4053 | function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) {
4054 | hasError = false;
4055 | caughtError = null;
> 4056 | invokeGuardedCallbackImpl$1.apply(reporter, arguments);
4057 | }
4058 | /**
4059 | * Same as invokeGuardedCallback, but instead of returning an error, it stores
View compiled
beginWork$1
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:23964
23961 | } // Run beginWork again.
23962 |
23963 |
> 23964 | invokeGuardedCallback(null, beginWork, null, current, unitOfWork, lanes);
| ^ 23965 |
23966 | if (hasCaughtError()) {
23967 | var replayError = clearCaughtError(); // `invokeGuardedCallback` sometimes sets an expando `_suppressLogging`.
View compiled
performUnitOfWork
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:22776
22773 |
22774 | if ( (unitOfWork.mode & ProfileMode) !== NoMode) {
22775 | startProfilerTimer(unitOfWork);
> 22776 | next = beginWork$1(current, unitOfWork, subtreeRenderLanes);
| ^ 22777 | stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true);
22778 | } else {
22779 | next = beginWork$1(current, unitOfWork, subtreeRenderLanes);
View compiled
workLoopSync
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:22707
22704 | function workLoopSync() {
22705 | // Already timed out, so perform work without checking if we need to yield.
22706 | while (workInProgress !== null) {
> 22707 | performUnitOfWork(workInProgress);
22708 | }
22709 | }
22710 |
View compiled
renderRootSync
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:22670
22667 |
22668 | do {
22669 | try {
> 22670 | workLoopSync();
| ^ 22671 | break;
22672 | } catch (thrownValue) {
22673 | handleError(root, thrownValue);
View compiled
performSyncWorkOnRoot
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:22293
22290 | }
22291 | } else {
22292 | lanes = getNextLanes(root, NoLanes);
> 22293 | exitStatus = renderRootSync(root, lanes);
| ^ 22294 | }
22295 |
22296 | if (root.tag !== LegacyRoot && exitStatus === RootErrored) {
View compiled
(anonymous function)
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:11327
11324 | var callback = _queue[i];
11325 |
11326 | do {
> 11327 | callback = callback(_isSync2);
| ^ 11328 | } while (callback !== null);
11329 | }
11330 | });
View compiled
unstable_runWithPriority
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/scheduler/cjs/scheduler.development.js:468
465 | currentPriorityLevel = priorityLevel;
466 |
467 | try {
> 468 | return eventHandler();
| ^ 469 | } finally {
470 | currentPriorityLevel = previousPriorityLevel;
471 | }
View compiled
runWithPriority$1
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:11276
11273 |
11274 | function runWithPriority$1(reactPriorityLevel, fn) {
11275 | var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);
> 11276 | return Scheduler_runWithPriority(priorityLevel, fn);
11277 | }
11278 | function scheduleCallback(reactPriorityLevel, callback, options) {
11279 | var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);
View compiled
flushSyncCallbackQueueImpl
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:11322
11319 | try {
11320 | var _isSync2 = true;
11321 | var _queue = syncQueue;
> 11322 | runWithPriority$1(ImmediatePriority$1, function () {
| ^ 11323 | for (; i < _queue.length; i++) {
11324 | var callback = _queue[i];
11325 |
View compiled
flushSyncCallbackQueue
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:11309
11306 | Scheduler_cancelCallback(node);
11307 | }
11308 |
> 11309 | flushSyncCallbackQueueImpl();
11310 | }
11311 |
11312 | function flushSyncCallbackQueueImpl() {
View compiled
discreteUpdates$1
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:22420
22417 | if (executionContext === NoContext) {
22418 | // Flush the immediate callbacks that were scheduled during this batch
22419 | resetRenderTimer();
> 22420 | flushSyncCallbackQueue();
| ^ 22421 | }
22422 | }
22423 | }
View compiled
discreteUpdates
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:3756
3753 | isInsideEventHandler = true;
3754 |
3755 | try {
> 3756 | return discreteUpdatesImpl(fn, a, b, c, d);
| ^ 3757 | } finally {
3758 | isInsideEventHandler = prevIsInsideEventHandler;
3759 |
View compiled
dispatchDiscreteEvent
C:/Users/sadia/OneDrive/SheCodes/Full stack/app/petshop/node_modules/react-dom/cjs/react-dom.development.js:5889
5886 | flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp);
5887 | }
5888 |
> 5889 | discreteUpdates(dispatchEvent, domEventName, eventSystemFlags, container, nativeEvent);
5890 | }
5891 |
5892 | function dispatchUserBlockingUpdate(domEventName, eventSystemFlags, container, nativeEvent) {
View compiled解决方案
要使用 react-hook-forms，有一些修复工作：
输入字段调用寄存器函数。此函数有 2 个参数：
register(field_name <- string, options <- object);
在您的情况下，您需要这样称呼它：
<input type='email' name='email' id='email' ref={register("email", {required:true}) } />
<input type='password' name='password' id='password'
ref={register("password", {required:true, minLength:6, maxLength: 10} )} />
您以错误的方式调用错误对象。这就是你应该如何称呼它：
const { register, handleSubmit, formState: { errors }, reset } = useForm();
我在修复后发现的最后一个错误是关于你调用注册函数的方式。
您正在 ref 属性中设置寄存器。根据文档，您应该只在组件中设置寄存器，这将返回所有道具：
<input type='email' id='email' {...register("email", {required:true}) } />
在 Sources，您可以阅读并深入了解“我为什么要这样做？” =）：
注册（）： https ://react-hook-form.com/api/useform/register
错误： https ://react-hook-form.com/api/useformstate/errormessage
我将在此处添加一些提示，以帮助您找到新错误的解决方案：
开辟一条发现重点的路径：当您遇到错误时，您需要准确找到导致它的原因。在您的情况下，控制台正在指责一个甚至不在您的主文件夹中的文件（这是一个依赖项）。在这种情况下，删除代码，尝试删除一些代码，看看项目是否有效。如果可行，您现在就在某处，然后再次过滤已删除的代码。
转到官方文档/演示并比较您的代码：我从未使用过 react-hook-forms，但是查看文档可以帮助我找到错误。
推荐阅读
- swift - 如何检查 RXSwift 中的 observable 是否为空？
- c# - v2 上 C# 中的 Azure 函数 - 如何访问门户应用程序设置
- sql - 求和数据并选择PK中的最大值
- android - 如何使用 Expandable 关闭 NavigationView 中的组菜单
- python - wkhtmltopdf - 由于网络错误而退出代码 1：ContentNotFoundError
- javascript - 使用 Styled-System 创建自定义样式的道具
- python-3.x - 什么 GetPostData() 使用 cefpython3 返回 { }？
- ansible - 我可以创建和使用自己的 Ansible 模块吗？
- python - 使用 canon_cr3 库从 .CR3 文件中获取未压缩的图像数据
- python - numpy ：在 3D 欧几里得坐标中找到 2 组 4 个点的变换矩阵