导入函数并使用"this"获取道具:"TypeError:无法读取未定义的属性'renderElapsedString'" [英] Importing function and getting props with "this": "TypeError: Cannot read property 'renderElapsedString' of undefined"

问题描述

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

I'm new to React and I'm creating a time logging app from the FullStackReact book, but using the ES6 'extends' module instead of Create Class. With that said, I'm getting this error and I'm out of ideas as to what's going on.

TypeError:无法读取未定义的属性"renderElapsedString"

TypeError: Cannot read property 'renderElapsedString' of undefined

编辑:从助手"导入中删除花括号后，我收到新错误

After removing the curly bracers from my 'helpers' import, I'm receiving a new error

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

TypeError: __WEBPACK_IMPORTED_MODULE_2__helpers___default.a.renderElapsedString is not a function

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

Final The problem was my helpers.js file, I wasn't exporting the functions, which is why the function itself was undefined.

    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代码

and here's my EditableTimer code

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
};

推荐答案

您的类看起来不错.该错误表明 helpers 对象未定义.

Your classes look fine. The error indicates that the helpers object is undefined.

这很可能是由于帮助程序文件中的 export 引起的.根据您导出助手的方式，您将以其他方式导入它们.在您的 Timer 文件中:

This is most likely because of the export in the helpers file. Depending on how your are exporting helpers you will import them in a different way. In your Timer file:

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

应该是

import helpers from '../helpers';

如果默认将辅助程序导出.请参阅此处，以获取有关导入/es6中的出口销毁.

if helpers is being exported as a default. See here for more info on import/export destructuring in es6.

这篇关于导入函数并使用"this"获取道具:"TypeError:无法读取未定义的属性'renderElapsedString'"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！