在此功能组件中使用useEffect挂钩时出现问题。我得到的对象不是函数错误。
我看到此错误通常在名为camelCase的功能组件中发现，但是，这是一个名为PascalCase的功能组件。
请让我知道是否可以找到错误。这是来自一个关于React的udemy教程，所以请原谅：）
编辑：我确认注释掉useEffect时，呈现的组件没有问题
编辑2：为了确保没有任何语法错误，我创建了一个toBeExecuted函数，然后将其作为useEffect的参数传递（尝试仅传递方法名称并对其进行调用） ，并且错误仍然存在
$ npm查看反应版本 16.13.1
import React, { useEffect } from "react";
import classes from "./Cockpit.css";
const Cockpit = (props) => {
useEffect(() => {
console.log("shd");
setTimeout(() => {
alert("Saved data to cloud!");
}, 1000);
return () => {
console.log('[Cockpit.js] cleanup work in use')
}
}, [props.persons]);
const assignedClasses = [];
let btnClass = "";
if (props.showPersons) {
btnClass = classes.Red;
}
if (props.persons.length <= 2) {
assignedClasses.push(classes.red); // classes = ['red']
}
if (props.persons.length <= 1) {
assignedClasses.push(classes.bold); // classes = ['red', 'bold']
}
return (
<div className={classes.Cockpit}>
<h1>{props.title}</h1>
<p className={assignedClasses.join(" ")}>This is really working!</p>
<button className={btnClass} onClick={props.clicked}>
Toggle Persons
</button>
</div>
);
};
export default Cockpit;
下面是控制台错误
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.
下面是我的package.json
{
"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"
}
}
答案 0 :(得分：0)
我已经在Codesandbox中使用它了：https://codesandbox.io/s/stackoverflow--useeffect-qzg3z?fontsize=14&hidenavigation=1&theme=dark
为演示起见，我将您的props值提升为常量。我发明了您的代码中不清楚的值。
我的猜测是，这是您props.clicked中的值
<button className={btnClass} onClick={props.clicked}>
也许是console.log(props.clicked)，然后看看它是怎么回事？
编辑：我通过将clicked替换为{}进行了测试，但会引发错误，但与您看到的错误不同。所以，我认为我的预感是错误的。抱歉：（
另一个错误（可能不相关）是您使用大写字母“ R” classes.Red和小写字母“ r” classes.red。您没有共享该对象，所以我不确定哪个是正确的。
最后，一个标注。您可能不需要将props.persons作为依赖项数组传递给useEffect。有时我想强制进行与使用的数据无关的重新渲染，但这很少见。通常，您的依赖项数组围绕useEffect内部使用的数据，而您没有使用props.persons。我猜你在做一个教程，所以也许会改变。
答案 1 :(得分：0)
我设法通过将我的反应升级到最新版本来解决此问题。
下面的链接是我找到解决此问题的答案的地方： https://www.udemy.com/course/react-the-complete-guide-incl-redux/learn/lecture/13556300#questions/11954840