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

运行时会产生此错误：

未捕获错误：元素类型无效：需要一个字符串（for 内置组件）或类/函数（用于复合组件）但得到了：对象。

完整的堆栈跟踪是：

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。

我的错误是仅更新react软件包，而不是react-dom软件包。正确更新react-dom后，此操作按预期工作。

React Context API - 元素类型无效

1 个答案: