React上下文API -元素类型无效。

Question

我只是在学习一些关于React的教程，上下文API正在通过本教程运行：

https://medium.com/@mtiller/react-16-3-context-api-intypescript-45c9eeb7a384

我已经更新了一个新的基本ASP.NET Core2.0站点，我现在迁移到使用新的上下文API，而不是使用状态/道具。我立刻遇到了一个问题，我甚至不清楚是什么问题。

我的组件代码是：

import * as React from 'react';
import { RouteComponentProps } from 'react-router';

//interface ICounterState {
//    currentCount: number;
//}

const store = {
    currentCount: 1
};

const myContext = React.createContext(store);

export class Counter extends React.Component<RouteComponentProps<{}>> {
    constructor(props: any, context: any) {
        super(props, context);
        //this.state = { currentCount: 0 };
    }

    public render() {
        return (
        <myContext.Provider value={store}>
            <div>
            <h1>Counter</h1>

            <p>This is a simple example of a React component.</p>
                    <myContext.Consumer>
                        {state => 

                            <p>Current count: <strong>{state.currentCount}</strong></p>
                        }
                </myContext.Consumer>

            <button onClick={ () => { this.incrementCounter() } }>Increment</button>
            </div>;
        </myContext.Provider>    
        )};

    incrementCounter() {
        //this.setState({
        //    currentCount: this.state.currentCount + 1
        //});
    }
}

在运行时，会产生以下错误：

Uncaught : Element type无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但got: object。

完整的堆栈跟踪是：

vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:118 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at invariant (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:118)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:20273)
    at ReactCompositeComponentWrapper.performInitialMount (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29799)
    at ReactCompositeComponentWrapper.mountComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690)
    at Object.mountComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:12868)
    at ReactCompositeComponentWrapper._updateRenderedComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:30197)
    at ReactCompositeComponentWrapper._performComponentUpdate (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:30156)
    at ReactCompositeComponentWrapper.updateComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:30077)
    at ReactCompositeComponentWrapper.receiveComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29979)
    at Object.receiveComponent (vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:12947)

该组件在这里使用：

import * as React from 'react';
import { Route } from 'react-router-dom';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';
import { MyComponent } from './components/MyComponent';

export const routes = <Layout>
    <Route exact path='/' component={ Home } />
    <Route path='/counter' component={ Counter } />
    <Route path='/fetchdata' component={FetchData} />
    <Route path='/mycomponent' component={MyComponent} />
</Layout>;

在Visual中查看源代码时，它突出显示state =>存在以下错误：

Parameter 'state' of function type implicitly has an 'any' type.

因为我还处在盲目地学习教程的阶段，直到我把我的注意力集中在事情上，所以我真的不知道这里告诉我的是什么。此外，我看不到我所尝试的内容与我所遵循的教程(除了本教程使用的是数组)之间的功能差别。

如何纠正这些问题以使该组件正确运行？

Answer 1

这是一个老问题，但当我试图从一个较旧版本的React (16.2.0)升级到16.5.2时，我遇到了同样的问题，这样我就可以使用新的上下文API了。

我的错误只是更新了react包，而不是react dom包。在正确地更新了react之后，这就像预期的那样起了作用。