Web开发新手不知道如何修复reactjs错误[关闭]

Question

这是一页很长的错误消息，我已经 2 周无法联系到教这门课的人了。我尝试重做它，但我仍然收到相同的消息，我不知道如何或做什么来修复它们。这是 git hub 链接：https://github.com/SadiaSanam/petshop

这些是消息，我该如何解决？因为有些页面我什至找不到..

TypeError: path.split 不是函数 得到 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

Answer 1

要使用 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，但是查看文档可以帮助我找到错误。