semantic-ui-react菜单返回TypeError：instance.render不是函数

Question

我对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

Answer 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} />

Answer 2

实际上，它是由Babel变换引起的错误，有关详细信息，请参阅the issue，