Момент JS Проблемы в реакции - PullRequest
Новая
       3

Момент JS Проблемы в реакции

1 голос
/ 22 апреля 2020

У меня проблемы с включением момента js в мое приложение реакции. Все примеры, которые я вижу в Интернете, показывают, что я могу использовать встроенный момент, как показано, где я создаю const spreadsheetInfoRow. React жалуется: «Unhandled Rejection (TypeError): невозможно вызвать класс как функцию» в связи с моментальным вызовом в этой строке. Если я просто использую обычную строку, она работает нормально, поэтому это единственная часть, вызывающая проблему во всем файле. Есть мысли? 

import React from 'react';
import ExcelJS from 'exceljs/dist/es5/exceljs.browser.js'
import { saveAs } from 'file-saver'
import moment from 'react-moment';

class SpreadsheetTester extends React.Component {
  async saveAsExcel() {
    const wb = new ExcelJS.Workbook()

    const worksheet = wb.addWorksheet()

    const companyInfoRow = worksheet.addRow(['Title'])
    const spreadsheetInfoRow = worksheet.addRow([`Purchase Stuff as of ${moment()}`])
    const spreadsheetOptionsRow = worksheet.addRow([`There were 2 owners who HAVE ordered something between 4/1/2020 and 4/22/2020.`])
    const headerRow = worksheet.addRow(['Last Order Date', 'Last Name', 'First Name', 'Owner Address', 'City', 'State', 'Zip', 'Phone', 'Cell', 'Work Phone', 'Email', 'Bar Code', 'Status'])

    const buf = await wb.xlsx.writeBuffer()

    saveAs(new Blob([buf]), 'abc.xlsx')
  }
  render() {
    return (
      <button onClick={this.saveAsExcel}>Click Here</button>
    );
  }
}

export default SpreadsheetTester;

Ответы [ 3 ]

2 голосов
/ 22 апреля 2020

Вы используете его неправильно. Попробуйте это: 

import Moment from 'react-moment'

let nowDate =  <Moment date={Date.now()}/>;

Теперь вы можете использовать переменную nowDate в нужном месте. Обратите внимание, что я использовал Момент в качестве капитала в импорте, вы должны сделать то же самое. Это сработало для меня.

РЕДАКТИРОВАТЬ: 

import React from 'react';
import ExcelJS from 'exceljs/dist/es5/exceljs.browser.js'
import { saveAs } from 'file-saver'
import Moment from 'react-moment';

class SpreadsheetTester extends React.Component {
  async saveAsExcel() {
    const wb = new ExcelJS.Workbook()

    const worksheet = wb.addWorksheet()
    let nowDate = <Moment date={Date.now()}/>
    const companyInfoRow = worksheet.addRow(['Title'])
    const spreadsheetInfoRow = worksheet.addRow([`Purchase Stuff as of ${nowDate}`])
    const spreadsheetOptionsRow = worksheet.addRow([`There were 2 owners who HAVE ordered something between 4/1/2020 and 4/22/2020.`])
    const headerRow = worksheet.addRow(['Last Order Date', 'Last Name', 'First Name', 'Owner Address', 'City', 'State', 'Zip', 'Phone', 'Cell', 'Work Phone', 'Email', 'Bar Code', 'Status'])

    const buf = await wb.xlsx.writeBuffer()

    saveAs(new Blob([buf]), 'abc.xlsx')
  }
  render() {
    return (
      <button onClick={this.saveAsExcel}>Click Here</button>
    );
  }
}

export default SpreadsheetTester;

Я также отредактировал ваш код, чтобы отразить необходимые изменения, вы можете просто вставить его и посмотреть, работает ли он.

0 голосов
/ 24 апреля 2020 
import React from 'react';
import ExcelJS from 'exceljs/dist/es5/exceljs.browser.js'
import { saveAs } from 'file-saver'
import * as moment from 'moment'

class SpreadsheetTester extends React.Component {
  async saveAsExcel() {
    const wb = new ExcelJS.Workbook()

    const worksheet = wb.addWorksheet()

    const companyInfoRow = worksheet.addRow(['Title'])
    const spreadsheetInfoRow = worksheet.addRow([`Purchase Stuff as of ${moment(Date.now()).format('DD/MM/YYYY')}`])
....
0 голосов
/ 22 апреля 2020

Я протестировал moment в узле, и он отлично работает, как вы его используете. Пакет узла moment экспортируется как функция

Однако, react-moment работает немного иначе, по-видимому. С сообщением об ошибке "Unhandled Rejection (TypeError): Cannot call a class as a function", которое вы получаете, похоже, что оно экспортируется как класс.

В соответствии с официальным do c., react-moment должно работать следующим образом: 

import React  from 'react';
import Moment from 'react-moment';

export default class MyComponent extends React.Component {
    render() {
        return (
            <Moment interval={30000}>
                1976-04-19T12:59-0500
            </Moment>
        );
    }
}
...