Reactjs 获取错误“；类型为'的参数；标题类型'；不可分配给类型为'；组件类型…'；或'；无状态组件'&引用；

首先，在我职业生涯的大部分时间里，我基本上都是编写API的，对react这个世界来说，我是比较新的。我正在为一个非营利组织构建一个react应用程序，我只是想尽快起步

我添加了一个header类，如下所示：

import './header.css';
import * as React from 'react';
import * as actions from '../../actions/authenticationActions';
import { AppState } from '../../state/appState';
import { connect, Dispatch } from 'react-redux';

const logo = require('./logo.svg');

interface Props {
    displayName: string;
    isAuthenticated: boolean;
    logIn?: () => void;
    logOut?: () => void;
}

interface State {

}
class Header extends React.Component<Props, State> {
    constructor(props: Props, state: State) {
        super(props, state);
    }

    render() {
        return (
            <div className={'Header'}>
                <div className={'Container'}>
                    <img src={logo} className="App-logo" alt="logo" />
                    <div className={'Header__nav'}>
                        <div className={'userLogin'}>
                            <div className={'user'}>{this.props.displayName}</div>
                            <a onClick={this.props.logOut}>Log Out</a><a onClick={this.props.logIn}>Log In</a>
                        </div>
                        {/*<a href='https://localhost/' className={'button button--goBack'}>Back to Website</a>*/}
                    </div>
                </div>
            </div>
        );
    }
}

export const mapStateToProps = ({ currentUser }: AppState) => ({
    displayName: (currentUser != null ? currentUser.preferredName : 'Please Log In'),
    isAuthenticated: currentUser != null
});

export const mapDispatchToProps = (dispatch: Dispatch<actions.AuthenticationActions>) => ({
    logIn: () => dispatch(actions.logIn()),
    logOut: () => dispatch(actions.logOut())
});

export default connect(mapStateToProps, mapDispatchToProps)(Header);

import./header.css'；
从“React”导入*作为React；
从“../../actions/authenticationActions”导入*作为操作；
从“../../state/AppState”导入{AppState}；
从'react redux'导入{connect，Dispatch}；
const logo=require（'./logo.svg'）；
界面道具{
显示名称：字符串；
未验证：布尔值；
登录？：（）=>作废；
注销？：（）=>作废；
}
界面状态{
}
类头扩展了React.Component{
构造函数（道具：道具，状态：状态）{
超级（道具，状态）；
}
render（）{
返回(
{this.props.displayName}
*/}
);
}
}
导出常量MapStateTops=（{currentUser}:AppState）=>({
displayName:（currentUser！=null？currentUser.preferredName:“请登录”），
isAuthenticated:currentUser！=null
});
导出常量mapDispatchToProps=（分派：分派）=>({
登录：（）=>调度（actions.logIn（）），
注销：（）=>dispatch（actions.logOut（））
});
导出默认连接（mapStateToProps、mapDispatchToProps）（标题）；

这在很大程度上看起来不错，但由于以下错误消息，它无法编译：

---

类型为“typeof Header”的参数不能分配给的参数 类型的组件类型登录；注销：…'。类型“typeof标头”不可用 可分配给“无状态组件登录”类型；日志…'。 类型“typeof Header”不提供与签名匹配的内容”（props:{displayName:string；isAuthenticated:boolean；}&{logIn:（）=> 登录；注销：（）=>logOut；}&{children？：ReactNode；}，context？： any）：元素| null’

---

我已经为此奋斗了好几个小时，但毫无结果。我相当确信这是一个错误；请温柔一点

构造函数中的第二个参数不是State，而是context

标头不是有效的React.Component，因为构造函数应为

constructor(props: Props, context) {
    super(props, context);
}

或者只是

constructor(props: Props) {
    super(props);
}

除非你需要上下文

---

这就是说，您已经用

React.Component

正确地键入了它，因为这两种类型是泛型

React.Component

类型所期望的，但这两种类型并不反映构造函数参数应该是什么（即

props

和（可选）上下文

）构造函数中的第二个参数不是State，而是context

标头不是有效的React.Component，因为构造函数应为

constructor(props: Props, context) {
    super(props, context);
}

或者只是

constructor(props: Props) {
    super(props);
}

除非你需要上下文

这就是说，您已经用
React.Component
正确地键入了它，因为这两种类型是泛型
React.Component
类型所期望的，但这两种类型并不反映构造函数参数应该是什么（即
props
和（可选）上下文
）
这个错误让人觉得connect确实需要一个无状态的组件（尽管我不知道为什么）。你可以试试：

import./header.css'；
从“React”导入*作为React；
从“../../actions/authenticationActions”导入*作为操作；
从“../../state/AppState”导入{AppState}；
从'react redux'导入{connect，Dispatch}；
const logo=require（'./logo.svg'）；
界面道具{
显示名称：字符串；
未验证：布尔值；
登录？：（）=>作废；
注销？：（）=>作废；
}
常量头=（道具：道具）=>(
{props.displayName}
*/}
);
导出常量MapStateTops=（{currentUser}:AppState）=>({
displayName:（currentUser！=null？currentUser.preferredName:“请登录”），
isAuthenticated:currentUser！=null
});
导出常量mapDispatchToProps=（分派：分派）=>({
登录：（）=>调度（actions.logIn（）），
注销：（）=>dispatch（actions.logOut（））
});
导出默认连接（mapStateToProps、mapDispatchToProps）（标题）；
该错误使connect看起来似乎真的、真的需要一个无状态组件（尽管我不知道为什么）。你可以试试：

import./header.css'；
从“React”导入*作为React；
从“../../actions/authenticationActions”导入*作为操作；
从“../../state/AppState”导入{AppState}；
从'react redux'导入{connect，Dispatch}；
const logo=require（'./logo.svg'）；
界面道具{
显示名称：字符串；
未验证：布尔值；
登录？：（）=>作废；
注销？：（）=>作废；
}
常量头=（道具：道具）=>(
{props.displayName}
*/}
);
导出常量MapStateTops=（{currentUser}:AppState）=>({
displayName:（currentUser！=null？currentUser.preferredName:“请登录”），
isAuthenticated:currentUser！=null
});
导出常量mapDispatchToProps=（分派：分派）=>({
登录：（）=>调度（actions.logIn（）），
注销：（）=>dispatch（actions.logOut（））
});
导出默认连接（mapStateToProps、mapDispatchToProps）（标题）；
感谢您的快速响应！我把状态从方程中完全去掉了，就像你写的那样。。但我还是犯了同样的错误。还有什么突出的吗？没有，一般定义是正确的。现在，您实际上并没有使用状态，所以您可以从泛型类型定义中删除它，但是如果您要使用状态，并且因此您的状态接口具有属性，那么您实现它的方式是正确的。请确保这是完全相同的错误。