javascript - 使用 "this": "TypeError: Cannot read property ' renderElapsedString' of undefined"导入函数并获取 props

Question

我是 React 新手，我正在从 FullStackReact 书中创建一个时间记录应用程序，但使用 ES6“扩展”模块而不是 Create Class。话虽如此，我收到了这个错误，而且我不知道发生了什么。

TypeError: Cannot read property 'renderElapsedString' of undefined

编辑:从“助手”导入中删除大括号后，我收到一个新错误

TypeError: __WEBPACK_IMPORTED_MODULE_2__helpers___default.a.renderElapsedString is not a function

最终编辑:问题是我的 helpers.js 文件，我没有导出函数，这就是函数本身未定义的原因。

    import React from 'react';
    import EditableTimerList from './EditableTimerList';
    import helpers from '../helpers';

    class Timer extends React.Component {
      render() {
          const elapsedString = helpers.renderElapsedString(this.props.elapsed)
        return(
          <div className="ui centered card">
            <div className="content">
              <div className="header">
                {this.props.title}
              </div>
              <div className="meta">{this.props.projects}
              </div>
              <div className="center aligned description">
                <h2>{elapsedString}</h2>
              </div>
              <div className="extra content">
                <span className="right floated edit icon">
                  <i className="edit icon"></i>
                </span>
                <span className="right floated trash icon">
                  <i className="trash icon"></i>
                </span>
              </div>
            </div>
            <div className="ui bottom attached blue basic button">Start</div>
          </div>
        )
      }
    }

    export default Timer;

这是我的 EditableTimer 代码

import React from 'react';
import helpers from '../helpers'
import EditableTimer from './EditableTimer'

class EditableTimerList extends React.Component {
  render() {
    return (
      <div id="timers">
        <EditableTimer
          title="Learn React"
          project="Web Domination"
          elapsed='8986300'
          runningSince={null}
          editFormOpen={false}
        />
        <EditableTimer
          title="Learn Extreme Ironing"
          project="Web Domination"
          elapsed='3890985'
          runningSince={null}
          editFormOpen={true}
        />
      </div>
    )
  }
}

export default EditableTimerList;

这是我的助手文件:

    export function newTimer(attrs = {}) {
    return {
        title: attrs.title || 'Timer',
        project: attrs.project || 'Project',
        id: uuid.v4(), // eslint-disable-line no-undef
        elapsed: 0
    };
}

export function findById(array, id, cb) {
    cb(array.find(el => el.id === id));
}

export function renderElapsedString(elapsed, runningSince) {
    let totalElapsed = elapsed;
    if (runningSince) {
        totalElapsed += Date.now() - runningSince;
    }
    return millisecondsToHuman(totalElapsed);
}

export function millisecondsToHuman(ms) {
    const seconds = Math.floor((ms / 1000) % 60);
    const minutes = Math.floor((ms / 1000 / 60) % 60);
    const hours = Math.floor(ms / 1000 / 60 / 60);

    return [
        pad(hours.toString(), 2),
        pad(minutes.toString(), 2),
        pad(seconds.toString(), 2)
    ].join(':');

}

export function pad(numberString, size) {
    let padded = numberString;
    while (padded.length < size) padded = '0' + padded;
    return padded;
}

export default {
    millisecondsToHuman: millisecondsToHuman,
    newTimer: newTimer,
    findById: findById,
    renderElapsedString: renderElapsedString
};

Answer 1

你的类(class)看起来不错。该错误表明 helpers 对象未定义。

这很可能是由于帮助程序文件中的导出所致。根据您导出助手的方式，您将以不同的方式导入它们。在您的 Timer 文件中:

import { helpers } from '../helpers';

应该是

import helpers from '../helpers';

是否默认导出助手。请参阅here有关 es6 中导入/导出解构的更多信息。