Question

我是新手并且努力奋斗。以下代码段会出现以下错误

“未捕获的TypeError：无法读取属性'creationDate'的未定义”。

如果我从populateTableRows和creationDate函数中移植代码，那么一切都很好用。 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提供的新的胖箭头（＆＃34;词汇this＆＃34;）语法。它创建了一个维护定义范围的函数。 E.g：

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

但是，最简单的方法是使用second argument that forEach takes this来使用：

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

反应“Uncaught TypeError：无法读取未定义的属性”

1 个答案: