Reactjs React对象不是useEffect上的函数错误_Reactjs_Use Effect_React Functional Component

Reactjs React对象不是useEffect上的函数错误

reactjs

Reactjs React对象不是useEffect上的函数错误,reactjs,use-effect,react-functional-component,Reactjs,Use Effect,React Functional Component,我在这个功能组件中使用useEffect钩子时遇到问题。我得到的对象不是函数错误我看到这个错误经常出现在命名为functional components的camelCase中，然而，这是一个命名为functional component的PascalCase 如果你能发现错误，请告诉我。这是我关于React的教程，请原谅我的无知：）编辑：我确认在注释出useEffect时，组件呈现时没有问题编辑2：为了确保没有任何语法错误，我创建了一个toBeExecuted函数，然后将其作为useEff

我在这个功能组件中使用useEffect钩子时遇到问题。我得到的对象不是函数错误

我看到这个错误经常出现在命名为functional components的camelCase中，然而，这是一个命名为functional component的PascalCase

如果你能发现错误，请告诉我。这是我关于React的教程，请原谅我的无知：）

编辑：我确认在注释出useEffect时，组件呈现时没有问题

编辑2：为了确保没有任何语法错误，我创建了一个toBeExecuted函数，然后将其作为useEffect的参数传递（尝试只传递方法名，也尝试调用它），错误仍然存在

$npm查看反应版本 16.13.1

下面是浏览器错误

×
TypeError: Object(...) is not a function
Cockpit
C:/react course/module 7/debugging--01-finished/src/components/Cockpit/Cockpit.js:6
  3 | import classes from "./Cockpit.css";
  4 | 
  5 | const Cockpit = (props) => {
> 6 |   useEffect(() => {
  7 |     console.log("shd");
  8 |     setTimeout(() => {
  9 |       alert("Saved data to cloud!");
View compiled
mountIndeterminateComponent
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:10449
  10446 | 
  10447 | {
  10448 |   ReactCurrentOwner$2.current = workInProgress;
> 10449 |   value = fn(props, context);
  10450 | }
  10451 | // React DevTools reads this flag.
  10452 | workInProgress.effectTag |= PerformedWork$1;
View compiled
beginWork
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:10647
  10644 | 
  10645 | switch (workInProgress.tag) {
  10646 |   case IndeterminateComponent$2:
> 10647 |     return mountIndeterminateComponent(current, workInProgress, priorityLevel);
  10648 |   case FunctionalComponent$1:
  10649 |     return updateFunctionalComponent(current, workInProgress);
  10650 |   case ClassComponent$6:
View compiled
performUnitOfWork
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:12621
  12618 | {
  12619 |   startWorkTimer(workInProgress);
  12620 | }
> 12621 | var next = beginWork(current, workInProgress, nextPriorityLevel);
  12622 | if (true && ReactFiberInstrumentation$1.debugTool) {
  12623 |   ReactFiberInstrumentation$1.debugTool.onBeginWork(workInProgress);
  12624 | }
View compiled
workLoop
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:12730
  12727 | if (nextPriorityLevel <= TaskPriority$1) {
  12728 |   // Flush all synchronous and task work.
  12729 |   while (nextUnitOfWork !== null) {
> 12730 |     nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  12731 |     if (nextUnitOfWork === null) {
  12732 |       !(pendingCommit !== null) ? invariant(false, 'Should have a pending commit. This error is likely caused by a bug in React. Please file an issue.') : void 0;
  12733 |       // We just completed a root. Commit it now.
View compiled
HTMLUnknownElement.callCallback
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:1319
  1316 |   // nested call would trigger the fake event handlers of any call higher
  1317 |   // in the stack.
  1318 |   fakeNode.removeEventListener(evtType, callCallback, false);
> 1319 |   func.apply(context, funcArgs);
  1320 |   didError = false;
  1321 | }
  1322 | 
View compiled
invokeGuardedCallbackDev
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:1358
  1355 | // errors, it will trigger our global error handler.
  1356 | var evt = document.createEvent('Event');
  1357 | evt.initEvent(evtType, false, false);
> 1358 | fakeNode.dispatchEvent(evt);
  1359 | 
  1360 | if (didError) {
  1361 |   if (!didSetError) {
View compiled
invokeGuardedCallback
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:1215
  1212 |  * @param {...*} args Arguments for function
  1213 |  */
  1214 | invokeGuardedCallback: function (name, func, context, a, b, c, d, e, f) {
> 1215 |   invokeGuardedCallback.apply(ReactErrorUtils, arguments);
  1216 | },
  1217 | 
  1218 | /**
View compiled
performWork
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:12848
  12845 | var didError = false;
  12846 | var error = null;
  12847 | {
> 12848 |   invokeGuardedCallback$1(null, workLoop, null, minPriorityLevel, deadline);
  12849 |   if (hasCaughtError()) {
  12850 |     didError = true;
  12851 |     error = clearCaughtError();
View compiled
scheduleUpdateImpl
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:13233
  13230 |     performWork(SynchronousPriority$1, null);
  13231 |   } else {
  13232 |     // Flush both synchronous and task work.
> 13233 |     performWork(TaskPriority$1, null);
  13234 |   }
  13235 |   break;
  13236 | case TaskPriority$1:
View compiled
scheduleUpdate
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:13172
  13169 | }
  13170 | 
  13171 | function scheduleUpdate(fiber, priorityLevel) {
> 13172 |   return scheduleUpdateImpl(fiber, priorityLevel, false);
  13173 | }
  13174 | 
  13175 | function scheduleUpdateImpl(fiber, priorityLevel, isErrorRecovery) {
View compiled
scheduleTopLevelUpdate
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:13445
  13442 |     warning$18(callback === null || typeof callback === 'function', 'render(...): Expected the last optional `callback` argument to be a ' + 'function. Instead received: %s.', callback);
  13443 |   }
  13444 |   addTopLevelUpdate(current, nextState, callback, priorityLevel);
> 13445 |   scheduleUpdate(current, priorityLevel);
  13446 | }
  13447 | 
  13448 | return {
View compiled
updateContainer
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:13475
  13472 |     container.pendingContext = context;
  13473 |   }
  13474 | 
> 13475 |   scheduleTopLevelUpdate(current, element, callback);
  13476 | },
  13477 | 
  13478 | 
View compiled
(anonymous function)
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:17168
  17165 |   root = container._reactRootContainer = newRoot;
  17166 |   // Initial mount should not be batched.
  17167 |   DOMRenderer.unbatchedUpdates(function () {
> 17168 |     DOMRenderer.updateContainer(children, newRoot, parentComponent, callback);
  17169 |   });
  17170 | } else {
  17171 |   DOMRenderer.updateContainer(children, root, parentComponent, callback);
View compiled
unbatchedUpdates
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:13304
  13301 | isUnbatchingUpdates = isBatchingUpdates;
  13302 | isBatchingUpdates = false;
  13303 | try {
> 13304 |   return fn();
  13305 | } finally {
  13306 |   isBatchingUpdates = previousIsBatchingUpdates;
  13307 |   isUnbatchingUpdates = previousIsUnbatchingUpdates;
View compiled
renderSubtreeIntoContainer
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:17167
  17164 |   var newRoot = DOMRenderer.createContainer(container);
  17165 |   root = container._reactRootContainer = newRoot;
  17166 |   // Initial mount should not be batched.
> 17167 |   DOMRenderer.unbatchedUpdates(function () {
  17168 |     DOMRenderer.updateContainer(children, newRoot, parentComponent, callback);
  17169 |   });
  17170 | } else {
View compiled
render
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:17192
  17189 |   return renderSubtreeIntoContainer(null, element, container, true, callback);
  17190 | },
  17191 | render: function (element, container, callback) {
> 17192 |   return renderSubtreeIntoContainer(null, element, container, false, callback);
  17193 | },
  17194 | unstable_renderSubtreeIntoContainer: function (parentComponent, element, containerNode, callback) {
  17195 |   !(parentComponent != null && ReactInstanceMap_1.has(parentComponent)) ? invariant(false, 'parentComponent must be a valid React Component') : void 0;
View compiled
./src/index.js
C:/react course/module 7/debugging--01-finished/src/index.js:7
   4 | import App from './containers/App';
   5 | import registerServiceWorker from './registerServiceWorker';
   6 | 
>  7 | ReactDOM.render(<App appTitle="Person Manager" />, document.getElementById('root'));
   8 | registerServiceWorker();
   9 | 
  10 | 
View compiled
__webpack_require__
C:/react course/module 7/debugging--01-finished/webpack/bootstrap 27db9ccab8c2fd790147:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
C:/react course/module 7/debugging--01-finished/webpack/bootstrap 27db9ccab8c2fd790147:87
  84 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |      hotCurrentParents = [];
  86 |  }
> 87 |  return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |  return {
View compiled
0
http://localhost:3000/static/js/bundle.js:63759:18
__webpack_require__
C:/react course/module 7/debugging--01-finished/webpack/bootstrap 27db9ccab8c2fd790147:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
(anonymous function)
C:/react course/module 7/debugging--01-finished/webpack/bootstrap 27db9ccab8c2fd790147:715
  712 | __webpack_require__.h = function() { return hotCurrentHash; };
  713 | 
  714 | // Load entry module and return exports
> 715 | return hotCreateRequire(0)(__webpack_require__.s = 0);
  716 | 
  717 | 
  718 | 
View compiled
(anonymous function)
http://localhost:3000/static/js/bundle.js:719:10
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

×
TypeError:对象（…）不是函数
驾驶舱
C:/react course/module 7/debugation--01 finished/src/components/caffick/caffick.js:6
3 |从“/campot.css”导入类；
4 | 
5 |常数座舱=（道具）=>{
>6 |使用效果（（）=>{
7 |控制台日志（“shd”）；
8 |设置超时（（）=>{
9 |警报（“已将数据保存到云端！”）；
视图编译
MountUndeterminateComponent
C:/react课程/模块7/调试--01完成/node_模块/react dom/cjs/react dom.development.js:10449
10446 | 
10447 | {
10448 | ReactCurrentOwner$2.current=工作进度；
>10449 |值=fn（道具、背景）；
10450 | }
10451 |//React DevTools读取此标志。
10452 | workInProgress.effectTag |=已执行工作$1；
视图编译
开始工作
C:/react课程/模块7/调试--01完成/node_模块/react dom/cjs/react dom.development.js:10647
10644 | 
10645 |开关（workInProgress.tag）{
10646 |案例不确定部分$2：
>10647 |返回安装不确定组件（当前、工作进度、优先级）；
10648 |案例功能组件$1：
10649 |返回updateFunctionalComponent（当前、工作进程）；
10650 |案例类别组件6美元：
视图编译
执行工作
C:/react课程/模块7/调试--01完成/node_模块/react dom/cjs/react dom.development.js:12621
12618 | {
12619 | startWorkTimer（工作进程）；
12620 | }
>12621 | var next=开始工作（当前、工作进度、下一个优先级水平）；
12622 | if（true&&ReactFiberInstrumentation$1.debugTool）{
12623 |反应纤维仪器$1.debugTool.onBeginWork（workInProgress）；
12624 | }
视图编译
工作循环
C:/react课程/模块7/调试--01完成/node_模块/react dom/cjs/react dom.development.js:12730
12727 |如果（下一优先级别12730 |下一工作=执行工作（下一工作）；
12731 |如果（nextUnitOfWork==null）{
12732 |！（pendingCommit！==null）？不变量（false，'应该有一个挂起的提交。此错误可能是由React中的错误引起的。请提交一个问题。'）：void 0；
12733 |//我们刚刚完成一个根目录。请立即提交。
视图编译
HtmlUnknowneElement.callCallback
C:/react课程/模块7/调试--01完成/node_模块/react dom/cjs/react dom.development.js:1319
1316 |//嵌套调用将触发任何调用的假事件处理程序
1317 |//在堆栈中。
1318 | fakeNode.removeEventListener（evtType，callCallback，false）；
>1319 |函数应用（上下文，函数）；
1320 | diderro=假；
1321 | }
1322 | 
视图编译
invokeGuardedCallbackDev
C:/react课程/模块7/调试--01完成/node_模块/react dom/cjs/react dom.development.js:1358
1355 |//错误，它将触发全局错误处理程序。
1356 | var evt=document.createEvent（'Event'）；
1357 | evt.initEvent（evtType，false，false）；
>1358 | fakeNode.调度事件（evt）；
1359 | 
1360 |如果（DIDRERROR）{
1361 |如果（！didSetError）{
视图编译
invokeGuardedCallback
C:/react课程/模块7/调试--01完成/node_模块/react dom/cjs/react dom.development.js:1215
函数的1212 |*@param{…*}参数
1213 |  */
1214 | invokeGuardedCallback:函数（名称、函数、上下文、a、b、c、d、e、f）{
>1215 | invokeGuardedCallback.apply（ReactErrorUtils，arguments）；
1216 | },
1217 | 
1218 | /**
视图编译
表演作品
C:/react课程/模块7/调试--01完成/node_模块/react dom/cjs/react dom.development.js:12848
12845 | var didError=false；
12846 | var错误=null；
12847 | {
>12848 | invokeGuardedCallback$1（null，workLoop，null，minPriorityLevel，deadline）；
12849 |如果（hasCaughtError（））{
12850 | diderro=真；
12851 |错误=clearCaughtError（）；
视图编译
scheduleUpdateImpl
C:/react课程/模块7/调试--01完成/node_模块/react dom/cjs/react dom.development.js:13233
13230 |性能工作（同步优先级$1，空）；
13231 |}其他{
13232 |//刷新同步工作和任务工作。
>13233 |性能工作（任务优先级$1，空）；
13234 |   }
13235 |中断；
13236 |案例任务优先1美元：
视图编译
计划更新
C:/react课程/模块7/调试--01完成/node_模块/react dom/cjs/react dom.development.js:13172
13169 | }
13170 | 
13171 |功能计划更新（光纤，优先级别）{
>13172 |返回scheduleUpdateImpl（光纤、优先级、假）；
13173 | }
13174 | 
13175 |功能计划更新IMPL（光纤、优先级、iSeries恢复）{
视图编译
scheduleTopLevelUpdate
C:/react课程/模块7/调试--01完成/node_模块/react dom/cjs/react dom.development.js:13445
13442 |警告$18（callback==null | | typeof callback==='function'，'render（…）：预期最后一个可选的'callback'参数为'+'函数。相反，收到的是：%s'，callback）；
13443 |   }
13444 | addTopLevelUpdate（当前、下一状态、回调、优先级）；
>13445 |计划更新（当前，优先级别）；
13446 | }
13447 | 
13448 |返回{
视图编译
更新容器
C:/react课程/模块7/调试--01 fin
Uncaught TypeError: Object(...) is not a function
    at Cockpit (Cockpit.js:6)
    at mountIndeterminateComponent (react-dom.development.js:10449)
    at beginWork (react-dom.development.js:10647)
    at performUnitOfWork (react-dom.development.js:12621)
    at workLoop (react-dom.development.js:12730)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1319)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1358)
    at invokeGuardedCallback (react-dom.development.js:1215)
    at performWork (react-dom.development.js:12848)
    at scheduleUpdateImpl (react-dom.development.js:13233)
    at scheduleUpdate (react-dom.development.js:13172)
    at scheduleTopLevelUpdate (react-dom.development.js:13445)
    at Object.updateContainer (react-dom.development.js:13475)
    at react-dom.development.js:17168
    at Object.unbatchedUpdates (react-dom.development.js:13304)
    at renderSubtreeIntoContainer (react-dom.development.js:17167)
    at Object.render (react-dom.development.js:17192)
    at Object../src/index.js (index.js:7)
    at __webpack_require__ (bootstrap 27db9ccab8c2fd790147:669)
    at fn (bootstrap 27db9ccab8c2fd790147:87)
    at Object.0 (registerServiceWorker.js:108)
    at __webpack_require__ (bootstrap 27db9ccab8c2fd790147:669)
    at bootstrap 27db9ccab8c2fd790147:715
    at bundle.js:719

×
TypeError: Object(...) is not a function
Cockpit
C:/react course/module 7/debugging--01-finished/src/components/Cockpit/Cockpit.js:6
  3 | import classes from "./Cockpit.css";
  4 | 
  5 | const Cockpit = (props) => {
> 6 |   useEffect(() => {
  7 |     console.log("shd");
  8 |     setTimeout(() => {
  9 |       alert("Saved data to cloud!");
View compiled
mountIndeterminateComponent
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:10449
  10446 | 
  10447 | {
  10448 |   ReactCurrentOwner$2.current = workInProgress;
> 10449 |   value = fn(props, context);
  10450 | }
  10451 | // React DevTools reads this flag.
  10452 | workInProgress.effectTag |= PerformedWork$1;
View compiled
beginWork
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:10647
  10644 | 
  10645 | switch (workInProgress.tag) {
  10646 |   case IndeterminateComponent$2:
> 10647 |     return mountIndeterminateComponent(current, workInProgress, priorityLevel);
  10648 |   case FunctionalComponent$1:
  10649 |     return updateFunctionalComponent(current, workInProgress);
  10650 |   case ClassComponent$6:
View compiled
performUnitOfWork
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:12621
  12618 | {
  12619 |   startWorkTimer(workInProgress);
  12620 | }
> 12621 | var next = beginWork(current, workInProgress, nextPriorityLevel);
  12622 | if (true && ReactFiberInstrumentation$1.debugTool) {
  12623 |   ReactFiberInstrumentation$1.debugTool.onBeginWork(workInProgress);
  12624 | }
View compiled
workLoop
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:12730
  12727 | if (nextPriorityLevel <= TaskPriority$1) {
  12728 |   // Flush all synchronous and task work.
  12729 |   while (nextUnitOfWork !== null) {
> 12730 |     nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  12731 |     if (nextUnitOfWork === null) {
  12732 |       !(pendingCommit !== null) ? invariant(false, 'Should have a pending commit. This error is likely caused by a bug in React. Please file an issue.') : void 0;
  12733 |       // We just completed a root. Commit it now.
View compiled
HTMLUnknownElement.callCallback
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:1319
  1316 |   // nested call would trigger the fake event handlers of any call higher
  1317 |   // in the stack.
  1318 |   fakeNode.removeEventListener(evtType, callCallback, false);
> 1319 |   func.apply(context, funcArgs);
  1320 |   didError = false;
  1321 | }
  1322 | 
View compiled
invokeGuardedCallbackDev
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:1358
  1355 | // errors, it will trigger our global error handler.
  1356 | var evt = document.createEvent('Event');
  1357 | evt.initEvent(evtType, false, false);
> 1358 | fakeNode.dispatchEvent(evt);
  1359 | 
  1360 | if (didError) {
  1361 |   if (!didSetError) {
View compiled
invokeGuardedCallback
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:1215
  1212 |  * @param {...*} args Arguments for function
  1213 |  */
  1214 | invokeGuardedCallback: function (name, func, context, a, b, c, d, e, f) {
> 1215 |   invokeGuardedCallback.apply(ReactErrorUtils, arguments);
  1216 | },
  1217 | 
  1218 | /**
View compiled
performWork
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:12848
  12845 | var didError = false;
  12846 | var error = null;
  12847 | {
> 12848 |   invokeGuardedCallback$1(null, workLoop, null, minPriorityLevel, deadline);
  12849 |   if (hasCaughtError()) {
  12850 |     didError = true;
  12851 |     error = clearCaughtError();
View compiled
scheduleUpdateImpl
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:13233
  13230 |     performWork(SynchronousPriority$1, null);
  13231 |   } else {
  13232 |     // Flush both synchronous and task work.
> 13233 |     performWork(TaskPriority$1, null);
  13234 |   }
  13235 |   break;
  13236 | case TaskPriority$1:
View compiled
scheduleUpdate
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:13172
  13169 | }
  13170 | 
  13171 | function scheduleUpdate(fiber, priorityLevel) {
> 13172 |   return scheduleUpdateImpl(fiber, priorityLevel, false);
  13173 | }
  13174 | 
  13175 | function scheduleUpdateImpl(fiber, priorityLevel, isErrorRecovery) {
View compiled
scheduleTopLevelUpdate
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:13445
  13442 |     warning$18(callback === null || typeof callback === 'function', 'render(...): Expected the last optional `callback` argument to be a ' + 'function. Instead received: %s.', callback);
  13443 |   }
  13444 |   addTopLevelUpdate(current, nextState, callback, priorityLevel);
> 13445 |   scheduleUpdate(current, priorityLevel);
  13446 | }
  13447 | 
  13448 | return {
View compiled
updateContainer
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:13475
  13472 |     container.pendingContext = context;
  13473 |   }
  13474 | 
> 13475 |   scheduleTopLevelUpdate(current, element, callback);
  13476 | },
  13477 | 
  13478 | 
View compiled
(anonymous function)
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:17168
  17165 |   root = container._reactRootContainer = newRoot;
  17166 |   // Initial mount should not be batched.
  17167 |   DOMRenderer.unbatchedUpdates(function () {
> 17168 |     DOMRenderer.updateContainer(children, newRoot, parentComponent, callback);
  17169 |   });
  17170 | } else {
  17171 |   DOMRenderer.updateContainer(children, root, parentComponent, callback);
View compiled
unbatchedUpdates
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:13304
  13301 | isUnbatchingUpdates = isBatchingUpdates;
  13302 | isBatchingUpdates = false;
  13303 | try {
> 13304 |   return fn();
  13305 | } finally {
  13306 |   isBatchingUpdates = previousIsBatchingUpdates;
  13307 |   isUnbatchingUpdates = previousIsUnbatchingUpdates;
View compiled
renderSubtreeIntoContainer
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:17167
  17164 |   var newRoot = DOMRenderer.createContainer(container);
  17165 |   root = container._reactRootContainer = newRoot;
  17166 |   // Initial mount should not be batched.
> 17167 |   DOMRenderer.unbatchedUpdates(function () {
  17168 |     DOMRenderer.updateContainer(children, newRoot, parentComponent, callback);
  17169 |   });
  17170 | } else {
View compiled
render
C:/react course/module 7/debugging--01-finished/node_modules/react-dom/cjs/react-dom.development.js:17192
  17189 |   return renderSubtreeIntoContainer(null, element, container, true, callback);
  17190 | },
  17191 | render: function (element, container, callback) {
> 17192 |   return renderSubtreeIntoContainer(null, element, container, false, callback);
  17193 | },
  17194 | unstable_renderSubtreeIntoContainer: function (parentComponent, element, containerNode, callback) {
  17195 |   !(parentComponent != null && ReactInstanceMap_1.has(parentComponent)) ? invariant(false, 'parentComponent must be a valid React Component') : void 0;
View compiled
./src/index.js
C:/react course/module 7/debugging--01-finished/src/index.js:7
   4 | import App from './containers/App';
   5 | import registerServiceWorker from './registerServiceWorker';
   6 | 
>  7 | ReactDOM.render(<App appTitle="Person Manager" />, document.getElementById('root'));
   8 | registerServiceWorker();
   9 | 
  10 | 
View compiled
__webpack_require__
C:/react course/module 7/debugging--01-finished/webpack/bootstrap 27db9ccab8c2fd790147:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
C:/react course/module 7/debugging--01-finished/webpack/bootstrap 27db9ccab8c2fd790147:87
  84 |      console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |      hotCurrentParents = [];
  86 |  }
> 87 |  return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |  return {
View compiled
0
http://localhost:3000/static/js/bundle.js:63759:18
__webpack_require__
C:/react course/module 7/debugging--01-finished/webpack/bootstrap 27db9ccab8c2fd790147:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
(anonymous function)
C:/react course/module 7/debugging--01-finished/webpack/bootstrap 27db9ccab8c2fd790147:715
  712 | __webpack_require__.h = function() { return hotCurrentHash; };
  713 | 
  714 | // Load entry module and return exports
> 715 | return hotCreateRequire(0)(__webpack_require__.s = 0);
  716 | 
  717 | 
  718 | 
View compiled
(anonymous function)
http://localhost:3000/static/js/bundle.js:719:10
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

{
  "name": "react-complete-guide",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "autoprefixer": "7.1.2",
    "babel-core": "6.25.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.1",
    "babel-preset-react-app": "^3.0.2",
    "babel-runtime": "6.26.0",
    "case-sensitive-paths-webpack-plugin": "2.1.1",
    "chalk": "1.1.3",
    "css-loader": "0.28.4",
    "dotenv": "4.0.0",
    "eslint": "4.4.1",
    "eslint-config-react-app": "^2.0.0",
    "eslint-loader": "1.9.0",
    "eslint-plugin-flowtype": "2.35.0",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-jsx-a11y": "5.1.1",
    "eslint-plugin-react": "7.1.0",
    "extract-text-webpack-plugin": "3.0.0",
    "file-loader": "0.11.2",
    "fs-extra": "3.0.1",
    "html-webpack-plugin": "2.29.0",
    "jest": "20.0.4",
    "object-assign": "4.1.1",
    "postcss-flexbugs-fixes": "3.2.0",
    "postcss-loader": "2.0.6",
    "promise": "8.0.1",
    "radium": "^0.19.4",
    "react": "^16.0.0-rc.3",
    "react-dev-utils": "^4.0.1",
    "react-dom": "^16.0.0-rc.3",
    "style-loader": "0.18.2",
    "sw-precache-webpack-plugin": "0.11.4",
    "url-loader": "0.5.9",
    "webpack": "3.5.1",
    "webpack-dev-server": "2.7.1",
    "webpack-manifest-plugin": "1.2.1",
    "whatwg-fetch": "2.0.3"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.js?(x)",
      "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}