Reactjs TypeScript 1.8-为什么我的React无状态函数组件在运行时抛出TypeError？

我正试图创建一个如TypeScript 1.8所述的。 这样编译时不会出错，但会在运行时抛出

TypeError

。 为什么?

我有一个接口

interface AppError {
  id: string;
  message: string;
}

我的组件如下所示： 从“React”导入*作为React

从“./error.interface”导入{AppError}；
const ErrorMessage=（props:{key:string，error:AppError}）=>(
{this.props.error.message}
);
导出默认错误消息；

它是从另一个组件使用的，如下所示：

import * as React from "react";

import * as ErrorModel from "./../error.model";
import { AppError } from "./../error.interface";

import ErrorMessage from "./error.message.tsx";


export default class ErrorContainer extends React.Component<{}, ErrorContainerState> {

    constructor(props) {
        super(props);
      this.state = this._buildState();
    }

    componentDidMount() { ErrorModel.observable.addListener(this._onModelUpdate.bind(this)); }
    componentWillUnmount() { ErrorModel.observable.removeListener(this._onModelUpdate.bind(this)); }

    render() {
        let divStyle = {
            marginTop: "15px"
        };

        return (
           <div className="row" id="errors" style={divStyle}>
                {this.state.errors.map((e) => <ErrorMessage key={e.id} error={e} />)}
           </div>
            );
    }

    _onModelUpdate() {
        this.setState(this._buildState());
    }

    _buildState() {
        return {
            errors: ErrorModel.getErrors()
        };
    }
}

interface ErrorContainerState {
    errors: AppError[];
}

import*as React from“React”；
从“/./error.model”导入*作为ErrorModel；
从“/./error.interface”导入{AppError}；
从“/error.message.tsx”导入ErrorMessage；
导出默认类ErrorContainer扩展React.Component{
建造师（道具）{
超级（道具）；
this.state=this._buildState（）；
}
componentDidMount（）{ErrorModel.observable.addListener（this.\u onModelUpdate.bind（this））；}
componentWillUnmount（）{ErrorModel.observable.removeListener（this._onModelUpdate.bind（this））；}
render（）{
让divStyle={
玛金托普：“15px”
};
返回(
{this.state.errors.map（（e）=>）}
);
}
_onModelUpdate（）{
this.setState（this._buildState（））；
}
_buildState（）{
返回{
错误：ErrorModel.getErrors（）
};
}
}
接口错误容器状态{
错误：AppError[]；
}

这样编译不会出错。但是，在运行时，我得到一个错误：

Uncaught（in promise）TypeError:cannotreadproperty'error'of undefined（…）

。错误指向我的无状态函数中的行：

下面是完整的堆栈跟踪

这一切作为一个正常的组成部分工作得非常好

版本信息：Typescript 1.8.7，react 0.14.7

My

react.d.ts

是通过安装的，它似乎是最新的

完整的TypeError堆栈跟踪：

未捕获（承诺中）TypeError:无法读取的属性“error” 未定义（…）错误消息@
错误。消息。tsx:6ReactCompositeComponentMixin.mountComponent@
ReactCompositeComponent.js:148包装器@ ReactPerf.js:66ReactReconciler.mountComponent@ ReactReconciler.js:37ReactMultiChild.Mixin.\u mountChildByNameAtIndex@ ReactMultiChild.js:474ReactMultiChild.Mixin.\u updateChildren@ ReactMultiChild.js:378ReactMultiChild.Mixin.updateChildren@ ReactMultiChild.js:326ReactDOMComponent.Mixin.\u updateDOMChildren@ ReactDOMComponent.js:871ReactDOMComponent.Mixin.updateComponent@ ReactDOMComponent.js:700ReactDOMComponent.Mixin.receiveComponent@ ReactDOMComponent.js:645ReactReconciler.receiveComponent@ ReactReconciler.js:87ReactCompositeComponentMixin.\u UpdaterEndedComponent @ ReactComponentComponent.js:562ReactComponentComponentMixin.\u performComponentUpdate @ ReactCompositeComponent.js:544ReactCompositeComponentMixin.updateComponent @ReactCompositeComponent.js:473wrapper@ ReactPerf.js:66ReactCompositeComponentMixin.PerformUpdate如果需要@ ReactCompositeComponent.js:421ReactReconciler.PerformUpdate如果需要 @ReactReconciler.js:102RunBatchedUpdate@ ReactUpdates.js:129Mixin.perform@Transaction.js:136Mixin.perform@ Transaction.js:136assign.perform@ ReactUpdates.js:86FlushBatchedUpdate@ReactUpdates.js:147@ ReactPerf.js:66Mixin.closeAll@Transaction.js:202Mixin.perform@ Transaction.js:149ReactDefaultBatchingStrategy.BatchedUpdate@ ReactDefaultBatchingStrategy.js:62enqueueUpdate@ ReactUpdates.js:176enqueueUpdate@ ReactUpdateQueue.js:24ReactUpdateQueue.enqueueSetState@ ReactUpdateQueue.js:190ReactComponent.setState@ ReactComponent.js:65ErrorContainer._onModelUpdate@ error.container.tsx:32（匿名函数）@ 可观察工厂。ts:21arrayEach@lodash.js:483forEach@ lodash.js:7827notifyAll@observeable factory.ts:21setErrors@ error.model.ts:38report@error.model.ts:15report@ error.service.ts:5_handleError@session.service.ts:34

---

无状态组件没有此

更改此行：

{this.props.error.message}

到

---

{props.error.message}

无状态组件没有

此

更改此行：

{this.props.error.message}

到

---

{props.error.message}

来自Björn的答案是正确的（无状态组件没有这个），为了清晰起见，只需将更正后的无状态组件代码放在这里：

import { AppError } from "../error.interface";

const ErrorMessage = (props: {key: string, error: AppError}) => (
  <div className="col-lg-12" id={props.error.id}>
    <h2 className="page-header"><small>{props.error.message}</small>  </h2>
  </div>
);

export default ErrorMessage;

import{AppError}from“./error.interface”；
const ErrorMessage=（props:{key:string，error:AppError}）=>(
{props.error.message}
);
导出默认错误消息；

来自Björn的答案是正确的（无状态组件没有这个），为了清晰起见，只需将更正后的无状态组件代码放在这里：

import { AppError } from "../error.interface";

const ErrorMessage = (props: {key: string, error: AppError}) => (
  <div className="col-lg-12" id={props.error.id}>
    <h2 className="page-header"><small>{props.error.message}</small>  </h2>
  </div>
);

export default ErrorMessage;

从“./error.interface”导入{AppError}；
const ErrorMessage=（props:{key:string，error:AppError}）=>(
{props.error.message}
);
导出默认错误消息；

Bjorn下面的回答是正确的。不幸的是，您没有看到编译错误的原因是

this

当前是函数的

any

。他们正在努力解决这个问题，并提供了指定

这个
类型的功能。比约恩下面的答案是正确的。不幸的是，您没有看到编译错误的原因是
this
当前是函数的
any
。他们正在努力解决这个问题，并提供当场指定
此
类型的功能。只需一个小调：用于
id
和
message
现场。只需一个小调：
id
和
message