我对React有些新意。我已经在React项目上工作了一段时间但从未弄乱过包和依赖项。我认为这就是我的问题所在。
我有一个项目，我使用Semantic-UI-React Menu + Router进行导航。直到昨晚它工作正常。然后我跑了npm install，一切都开始失败了。我正在深入研究细节以找出根本原因，并确定<Menu />导致问题。所以我使用 create-new-app 包创建了一个全新的应用程序，并确认新创建的应用程序有效。然后我添加了语义 - 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
答案 0 :(得分：1)
这可以解决您的问题。
class TestChangeContatct: UIViewController{
@IBOutlet var textLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
NotificationCenter.default.addObserver(
self,
selector: #selector(addressBookDidChange),
name: NSNotification.Name.CNContactStoreDidChange,
object: nil)
}
@objc func addressBookDidChange(notification: NSNotification){
print("notification: \(notification)")
}
}
或
const MenuExampleProps = () => <Menu items={items} />
答案 1 :(得分：0)
实际上，它是由Babel变换引起的错误，有关详细信息，请参阅the issue，