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

【问题标题】：TypeScript 1.8 - Why does my React Stateless Function component throw a TypeError at runtime?TypeScript 1.8 - 为什么我的 React Stateless Function 组件在运行时会抛出 TypeError？
【发布时间】：2016-06-26 01:53:05
【问题描述】：

我正在尝试创建一个 React Stateless Function component，如 TypeScript 1.8 release notes 中所述。这编译没有错误，但在运行时抛出TypeError。为什么？

我有一个界面

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

我的组件如下所示：从 "react" 导入 * as 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，react 0.14.7

我的react.d.ts 是通过typings 安装的，它似乎是最新的。

完整的 TypeError 堆栈跟踪：

Uncaught (in promise) TypeError: Cannot read property 'error' of undefined(…)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:66ReactCompositeComponentMixin.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:24ReactUpdateQueue.enqueueSetState @ ReactUpdateQueue.js:190ReactComponent.setState @ ReactComponent.js:65ErrorContainer._onModelUpdate @ error.container.tsx:32（匿名函数）@ observable-factory.ts:21arrayEach @ lodash.js:483forEach @ lodash.js:7827notifyAll @ observable-factory.ts:21setErrors @ error.model.ts:38report@error.model.ts:15report@ error.service.ts:5_handleError @ session.service.ts:34

【问题讨论】：

Bjorn 下面的回答是正确的。不幸的是，您没有看到编译错误的原因是因为 this 当前是函数的 any。他们正在努力解决此问题并提供指定this 类型的功能。

标签： reactjs typescript tsx

【解决方案1】：

无状态组件没有this。

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

到

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

【讨论】：

正确。只是一个小问题：id 和 message ?

【解决方案2】：

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

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;

【讨论】：