导入函数并使用“ this”获取道具：“ TypeError：无法读取未定义的属性'renderElapsedString'”

Question

我是React的新手，正在使用FullStackReact本书创建一个时间记录应用程序，但是使用ES6的“扩展”模块而不是创建类。 话虽如此，我遇到了这个错误，并且对发生的事情一无所知。

TypeError：无法读取未定义的属性“ renderElapsedString”

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

TypeError：__WEBPACK_IMPORTED_MODULE_2__helpers ___ default.a.renderElapsedString不是函数

最终编辑：问题是我的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

您的课程看起来不错。 该错误表明helpers对象未定义。

这很可能是由于助手文件中的export 。 根据您导出助手的方式，您将以其他方式导入它们。 在您的Timer文件中：

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

应该是

import helpers from '../helpers';

如果默认将辅助程序导出。 有关es6中导入/导出解构的更多信息，请参见此处 。