Question

我正在尝试按照TypeScript 1.8 React Stateless Function component中的说明创建release notes。这样编译时没有错误，但在运行时抛出TypeError。为什么呢？

我有一个界面

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

我的组件如下所示： import * as React from＆＃34; react＆＃34 ;;

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是通过typings安装的，它似乎是最新版本。

完整的TypeError堆栈跟踪：

未捕获（承诺）TypeError：无法读取属性＆＃39;错误＆＃39;的   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：7827notify所有@ observable-factory.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>

Answer 2

Björn的答案是正确的（无状态组件没有 this ），为了清楚起见，只需在此处放置已更正的无状态组件代码：

RecyclerView.Adapter

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

2 个答案: