Question

React “未捕获的类型错误：无法读取未定义的属性”

2016-05-26

2718

reactjs

我是 React 新手，正在努力。以下代码片段给出以下错误

"Uncaught TypeError: Cannot read property 'creationDate' of undefined".

如果我将代码从 populateTableRows 和 creationDate 函数移到 render 内部，一切都会正常工作。SurveyList 从另一个组件获取数据。我知道这是一个非常丑陋的组件，也欢迎所有其他建议，但我最感兴趣的是这个特定的错误。

import React from 'react';
import ReactDOM from 'react-dom';
import { Table, Tr, Td } from 'reactable';

class SurveyList extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      isSaved: false,
      surveys: []
    };
    this.creationDate = this.creationDate.bind(this);
    this.populateTableRows = this.populateTableRows.bind(this);    
  }

  creationDate (obj){
    return new Date(obj._id.time).toISOString().slice(0,10);
  }

  populateTableRows(surveys){
    var surveyRows = [];
    surveys.forEach(function(obj){
      surveyRows.push(
        <Tr key={obj.surveyId}>
          <Td column="SurveyId">{obj.surveyId}</Td>
          <Td column="Survey name">{obj.surveyName}</Td>
          <Td column="Creation date">{this.creationDate(obj)}</Td>
          <Td column=""><ModalDialog key={obj.surveyId}
                                     survey={obj}
          /></Td>
        </Tr>
      );
    });
    return surveyRows;
  }

  render() {
    var surveys = Array.from(this.props.surveys);
    var surveyRows = this.populateTableRows(surveys);
    return (
      <Table className="table" id="table" sortable={true} filterable={['SurveyId', 'Survey name', 'Creation date']}>
        {surveyRows}
      </Table>
    )
  }
}

Answer 1

@ctrlplusb 的评论是正确的。当您使用 function 关键字（如在 surveys.forEach 调用中所做的那样）时，其内容将获得一个新的范围 - 因此是一个新的 this ，它是未定义的，因为它不属于任何对象。有几种解决方案。

最漂亮的方法是使用 ES2015 中通过 Babel 提供的新粗箭头（“词汇 this ”）语法。它创建一个函数来维护其定义的作用域。例如：

surveys.forEach( obj => surveyRows.push(/* ... */) );

但是，最简单的方法是使用 forEach 所采用的第二个参数，即要使用的 this ：

surveys.forEach( function ( obj ) {
  surveyRows.push(/* ... */);
}, this );