React «Uncaught TypeError: Невозможно прочитать свойство неопределенного»

Question

Я реал новичок и борюсь. Следующий фрагмент кода дает следующую ошибку

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

Если переместить код из 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, который не определен, поскольку он не принадлежит ни одному объекту. Существует несколько решений.

Самый красивый - использовать новую жирную стрелу ("lexical this") синтаксис, доступный в ES2015 через Babel. Он создает функцию, которая поддерживает область, в которой она была определена. Например .:

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

Однако проще всего использовать second argument that forEach takes, который является this использовать:

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