1

我正在尝试创建一个React Stateless Function 组件，如 TypeScript 1.8 release notes中所述。这编译没有错误，但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，react 0.14.7

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

完整的 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@ReactDOMMultiChild.js:326React Mixin。 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

4

2 回答 2

5

无状态组件没有this.

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

至

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

于 2016-03-11T00:22:45.537 回答
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;
于 2016-09-02T09:34:26.100 回答