我对 React 有点陌生。我从事 React 项目已经有一段时间了，但从未搞乱过包和依赖项。我认为这就是我的问题所涉及的。
我有一个项目，我使用 Semantic-UI-React Menu + Router 进行导航。直到昨晚，一切都还顺利。然后我跑了npm install一切都开始失败。我正在深入研究细节以找到根本原因，并确定 <Menu />导致了这个问题。因此，我使用 create-new-app 包创建了一个新的应用程序，并确认新创建的应用程序可以正常工作。然后我向其中添加了 semantic-ui-react 包并确认它工作正常。之后我尝试渲染 <Menu />再次看到我在项目中看到的相同问题。我怀疑软件包的版本出了问题，但我无法弄清楚它是什么。
Node.js 版本为 10.0.0。
npm 版本是 5.6.0。
这是我的 package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-scripts": "1.1.4",
"semantic-ui-react": "^0.80.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
这是我的 App.js(菜单示例是从语义-ui-react 引用中按原样复制的):
import React, { Component } from 'react';
import logo from './logo.svg';
import { Menu } from 'semantic-ui-react';
import './App.css';
const items = [
{ key: 'editorials', active: true, name: 'Editorials' },
{ key: 'review', name: 'Reviews' },
{ key: 'events', name: 'Upcoming Events' },
]
const MenuExampleProps = () => (
<Menu items={items} />
)
export default MenuExampleProps
当我运行yarn start时，我看到这个:
1 of 2 errors on the page
TypeError: instance.render is not a function
finishClassComponent
node_modules/react-dom/cjs/react-dom.development.js:13085
13082 | } else {
13083 | {
13084 | ReactDebugCurrentFiber.setCurrentPhase('render');
> 13085 | nextChildren = instance.render();
13086 | if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
13087 | instance.render();
13088 | }
updateClassComponent
node_modules/react-dom/cjs/react-dom.development.js:13047
13044 | } else {
13045 | shouldUpdate = updateClassInstance(current, workInProgress, renderExpirationTime);
13046 | }
> 13047 | return finishClassComponent(current, workInProgress, shouldUpdate, hasContext, renderExpirationTime);
13048 | }
13049 |
13050 | function finishClassComponent(current, workInProgress, shouldUpdate, hasContext, renderExpirationTime) {
beginWork
node_modules/react-dom/cjs/react-dom.development.js:13715
13712 | case FunctionalComponent:
13713 | return updateFunctionalComponent(current, workInProgress);
13714 | case ClassComponent:
> 13715 | return updateClassComponent(current, workInProgress, renderExpirationTime);
13716 | case HostRoot:
13717 | return updateHostRoot(current, workInProgress, renderExpirationTime);
13718 | case HostComponent:
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:15741
15738 | startBaseRenderTimer();
15739 | }
15740 |
> 15741 | next = beginWork(current, workInProgress, nextRenderExpirationTime);
15742 |
15743 | if (workInProgress.mode & ProfileMode) {
15744 | // Update "base" time if the render wasn't bailed out on.
workLoop
node_modules/react-dom/cjs/react-dom.development.js:15780
15777 | if (!isAsync) {
15778 | // Flush all expired work.
15779 | while (nextUnitOfWork !== null) {
> 15780 | nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
15781 | }
15782 | } else {
15783 | // Flush asynchronous work until the deadline runs out of time.
callCallback
node_modules/react-dom/cjs/react-dom.development.js:100
97 | // nested call would trigger the fake event handlers of any call higher
98 | // in the stack.
99 | fakeNode.removeEventListener(evtType, callCallback, false);
> 100 | func.apply(context, funcArgs);
101 | didError = false;
102 | }
103 |
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:138
135 | // Synchronously dispatch our fake event. If the user-provided function
136 | // errors, it will trigger our global error handler.
137 | evt.initEvent(evtType, false, false);
> 138 | fakeNode.dispatchEvent(evt);
139 |
140 | if (didError) {
141 | if (!didSetError) {
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:187
184 | * @param {...*} args Arguments for function
185 | */
186 | invokeGuardedCallback: function (name, func, context, a, b, c, d, e, f) {
> 187 | invokeGuardedCallback$1.apply(ReactErrorUtils, arguments);
188 | },
189 |
190 | /**
replayUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:15194
15191 | // Replay the begin phase.
15192 | isReplayingFailedUnitOfWork = true;
15193 | originalReplayError = thrownValue;
> 15194 | invokeGuardedCallback$2(null, workLoop, null, isAsync);
15195 | isReplayingFailedUnitOfWork = false;
15196 | originalReplayError = null;
15197 | if (hasCaughtError()) {
renderRoot
node_modules/react-dom/cjs/react-dom.development.js:15840
15837 |
15838 | var failedUnitOfWork = nextUnitOfWork;
15839 | if (true && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
> 15840 | replayUnitOfWork(failedUnitOfWork, thrownValue, isAsync);
15841 | }
15842 |
15843 | // TODO: we already know this isn't true in some cases.
performWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:16437
16434 | completeRoot(root, finishedWork, expirationTime);
16435 | } else {
16436 | root.finishedWork = null;
> 16437 | finishedWork = renderRoot(root, expirationTime, false);
16438 | if (finishedWork !== null) {
16439 | // We've completed the root. Commit it.
16440 | completeRoot(root, finishedWork, expirationTime);
performWork
node_modules/react-dom/cjs/react-dom.development.js:16358
16355 | }
16356 | } else {
16357 | while (nextFlushedRoot !== null && nextFlushedExpirationTime !== NoWork && (minExpirationTime === NoWork || minExpirationTime >= nextFlushedExpirationTime)) {
> 16358 | performWorkOnRoot(nextFlushedRoot, nextFlushedExpirationTime, false);
16359 | findHighestPriorityRoot();
16360 | }
16361 | }
performSyncWork
node_modules/react-dom/cjs/react-dom.development.js:16330
16327 | }
16328 |
16329 | function performSyncWork() {
> 16330 | performWork(Sync, false, null);
16331 | }
16332 |
16333 | function performWork(minExpirationTime, isAsync, dl) {
requestWork
node_modules/react-dom/cjs/react-dom.development.js:16230
16227 |
16228 | // TODO: Get rid of Sync and use current time?
16229 | if (expirationTime === Sync) {
> 16230 | performSyncWork();
16231 | } else {
16232 | scheduleCallbackWithExpiration(expirationTime);
16233 | }
scheduleWork$1
node_modules/react-dom/cjs/react-dom.development.js:16096
16093 | !isWorking || isCommitting$1 ||
16094 | // ...unless this is a different root than the one we're rendering.
16095 | nextRoot !== root) {
> 16096 | requestWork(root, nextExpirationTimeToWorkOn);
16097 | }
16098 | if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
16099 | invariant(false, 'Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.');
scheduleRootUpdate
node_modules/react-dom/cjs/react-dom.development.js:16663
16660 | }
16661 | enqueueUpdate(current, update, expirationTime);
16662 |
> 16663 | scheduleWork$1(current, expirationTime);
16664 | return expirationTime;
16665 | }
16666 |
updateContainerAtExpirationTime
node_modules/react-dom/cjs/react-dom.development.js:16690
16687 | container.pendingContext = context;
16688 | }
16689 |
> 16690 | return scheduleRootUpdate(current, element, expirationTime, callback);
16691 | }
16692 |
16693 | function findHostInstance(component) {
updateContainer
node_modules/react-dom/cjs/react-dom.development.js:16717
16714 | var current = container.current;
16715 | var currentTime = recalculateCurrentTime();
16716 | var expirationTime = computeExpirationForFiber(currentTime, current);
> 16717 | return updateContainerAtExpirationTime(element, container, parentComponent, expirationTime, callback);
16718 | }
16719 |
16720 | function getPublicRootInstance(container) {
./node_modules/react-dom/cjs/react-dom.development.js/ReactRoot.prototype.render
node_modules/react-dom/cjs/react-dom.development.js:17000
16997 | if (callback !== null) {
16998 | work.then(callback);
16999 | }
> 17000 | updateContainer(children, root, null, work._onCommit);
17001 | return work;
17002 | };
17003 | ReactRoot.prototype.unmount = function (callback) {
legacyRenderSubtreeIntoContainer/<
node_modules/react-dom/cjs/react-dom.development.js:17140
17137 | if (parentComponent != null) {
17138 | root.legacy_renderSubtreeIntoContainer(parentComponent, children, callback);
17139 | } else {
> 17140 | root.render(children, callback);
17141 | }
17142 | });
17143 | } else {
unbatchedUpdates
node_modules/react-dom/cjs/react-dom.development.js:16557
16554 | isUnbatchingUpdates = false;
16555 | }
16556 | }
> 16557 | return fn(a);
16558 | }
16559 |
16560 | // TODO: Batching should be implemented at the renderer level, not within
legacyRenderSubtreeIntoContainer
node_modules/react-dom/cjs/react-dom.development.js:17136
17133 | };
17134 | }
17135 | // Initial mount should not be batched.
> 17136 | unbatchedUpdates(function () {
17137 | if (parentComponent != null) {
17138 | root.legacy_renderSubtreeIntoContainer(parentComponent, children, callback);
17139 | } else {
render
node_modules/react-dom/cjs/react-dom.development.js:17195
17192 | return legacyRenderSubtreeIntoContainer(null, element, container, true, callback);
17193 | },
17194 | render: function (element, container, callback) {
> 17195 | return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);
17196 | },
17197 | unstable_renderSubtreeIntoContainer: function (parentComponent, element, containerNode, callback) {
17198 | !(parentComponent != null && has(parentComponent)) ? invariant(false, 'parentComponent must be a valid React Component') : void 0;
./src/index.js
src/index.js:7
4 | import App from './App';
5 | import registerServiceWorker from './registerServiceWorker';
6 |
> 7 | ReactDOM.render(<App />, document.getElementById('root'));
8 | registerServiceWorker();
9 |
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
最佳答案
这应该可以解决您的问题。
const MenuExampleProps = () => <Menu items={items} />
或
class MenuExampleProps extends React.Component {
render() {
return <Menu items={items} />
}
}
关于javascript - semantic-ui-react 菜单返回 TypeError : instance. 渲染不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50530634/