React Context API - недопустимый тип элемента

Question

Я просто работаю над некоторыми учебными пособиями по React, и контекстное API работает с этим учебным пособием:

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

Я обновил новый базовый ASP.NET Core 2.0сайт, на который я сейчас перехожу, используя новый Context API вместо использования state / props.Я сразу столкнулся с проблемой, что я даже не понимаю, в чем проблема.

Мой код компонента:

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
        //});
    }
}

Который при запуске выдает эту ошибку:

Неопознанная ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: 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 Studio он выделил state => с ошибкой:

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

Так как я все еще на стадии слепого следования учебникам, пока не разбираюсь в вещах, я действительно не уверен в том, что мне здесь говорят.Также я не вижу большой функциональной разницы между тем, что я пытаюсь, и учебником, которому я следую (кроме того, что учебник использует массив).

Как я могу исправить эти проблемы, чтобы этот компонентправильно запустить?

Answer 1

Это старая проблема, но у меня возникла та же проблема, когда я пытался обновить старую версию React (16.2.0) до 16.5.2, чтобы я мог использовать новый Context API.

Моя ошибка состояла только в обновлении пакета реагирования, а не пакета реагирования-dom.После корректного обновления response-dom это сработало, как и ожидалось.