TypeScript 1.8 - 为什么我的React Stateless Function组件在运行时抛出TypeError？

Question

我正在尝试创建一个React无状态函数组件,如TypeScript 1.8 发行说明中所述.这编译没有错误但TypeError在运行时抛出.为什么？

我有一个界面

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

我的组件如下所示:import*as React from"react";

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

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

export default ErrorMessage;

它用于另一个组件,如下所示:

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[];
}

这编译没有错误.但是,在运行时我得到错误:Uncaught (in promise) TypeError: Cannot read property 'error' of undefined(…).该错误指向我的无状态函数中的行: <div className="col-lg-12" id={this.props.error.id}>

完整的堆栈跟踪如下.

这一切都非常适合作为正常组件.

版本信息:Typescript 1.8.7,反应0.14.7

我react.d.ts是通过打字安装的,它似乎是最新的.

完整的TypeError堆栈跟踪:

未捕获的(以诺)类型错误:无法读取未定义(...)的ErrorMessage @的特性'错误'
error.message.tsx:6ReactCompositeComponentMixin.mountComponent @
ReactCompositeComponent.js:148wrapper @ ReactPerf.js:66ReactReconciler.mountComponent @ ReactReconciler.js:37ReactMultiChild. Mixin._mountChildByNameAtIndex @ ReactMultiChild.js:474ReactMultiChild.Mixin._updateChildren @ ReactMultiChild.js:378ReactMultiChild.Mixin.updateChildren @ ReactMultiChild.js:326ReactDOMComponent.Mixin._updateDOMChildren @ ReactDOMComponent.js:871ReactDOMComponent.Mixin.updateComponent @ ReactDOMComponent.js:700ReactDOMComponent. Mixin.receiveComponent @ ReactDOMComponent.js:645ReactReconciler.receiveComponent @ ReactReconciler.js:87ReactCompositeComponentMixin._updateRenderedComponent @ ReactCompositeComponent.js:562ReactCompositeComponentMixin._performComponentUpdate @ ReactCompositeComponent.js:544ReactCompositeComponentMixin.updateComponent @ ReactCompositeComponent.js:473wrapper @ ReactPerf.js:66ReactCo mpositeComponentMixin.performUpdateIfNecessary @ ReactCompositeComponent.js:421ReactReconciler.performUpdateIfNecessary @ ReactReconciler.js:102runBatchedUpdates @ ReactUpdates.js:129Mixin.perform @ Transaction.js:136Mixin.perform @ Transaction.js:136assign.perform @ ReactUpdates.js:86flushBatchedUpdates @ ReactUpdates. js:147wrapper @ ReactPerf.js:66Mixin.closeAll @Transaction.js:202Mixin.perform @Transaction.js:149ReactDefaultBatchingStrategy.batchedUpdates @ReactDefaultBatchingStrategy.js:62enqueueUpdate @ ReactUpdates.js:176enqueueUpdate @ ReactUpdateQueue.js:24.ReactUpdateQueue.enqueueSetState @ ReactUpdateQueue. JS:190ReactComponent.setState @ ReactComponent.js:65ErrorContainer._onModelUpdate @ error.container.tsx:32(匿名函数)观察到的@-factory.ts:21arrayEach @ lodash.js:483forEach @ lodash.js:7827notifyAll @观察到工厂. ts:21setErrors @ error.model.ts:38report @ error.model.ts:15report @ error.service.ts:5_handleError @ session.service.ts:34

Answer 1

无状态组件没有this.

改变这一行: <h2 className="page-header"><small>{this.props.error.message}</small> </h2>

至

<h2 className="page-header"><small>{props.error.message}</small> </h2>