Question

我正在尝试导入默认导出的javascript类。但是我不能使用它中定义的函数。错误显示“Uncaught TypeError：_omise2.default.setPublicKey不是函数”

这是我正在尝试导入的类的文件

import { isUri } from 'valid-url';
import 'whatwg-fetch';

export default class Omise {
  constructor(config) {
    const result = verifyConfigStructure(config);
    if (result.error) {
      throw new Error(result.message);
    }

    this.config = config;
    this.publicKey = null;
    this._rpc = null;
  }

  _createRpc(callback) {
    if (this._rpc) {
      return this._rpc;
    }
    else {
      const { vaultUrl } = this.config;
      const tm = setTimeout(() => {
        this._rpc.destroy();
        this._rpc = null;

        if (callback) { callback(); }
      }, 30000);

      this._rpc = new easyXDM.Rpc({
        remote: `${vaultUrl}/provider`,
        onReady() {
          clearTimeout(tm);
        }
      }, {
        remote: {
          createToken: {}
        }
      });

      return this._rpc;
    }
  }

  setPublicKey(publicKey) {
    this.publicKey = publicKey;
    return this.publicKey;
  }

  createSource(type, options, callback) {
    const auth = btoa(this.publicKey);

    options.type = type;
    
    const url = `${this.config.interfaceUrl}/sources/`;
    fetch(url, {
      method: 'post',
      headers: {
        Authorization: `Basic ${auth}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(options),
    })
    .then(response => (
      response
        .json()
        .then(data => callback(response.status, data))
    ))
    .catch((error) => {
      callback(0, {
        code: 'create_source_error',
        error: error.message,
      })
    });
  }

  createToken(as, attributes, handler) {
    const data = {};
    data[as] = attributes;

    this._createRpc(() => {
      handler(0, {
        code: 'rpc_error',
        message: 'unable to connect to provider after timeout'
      });
    }).createToken(this.publicKey, data, (response) => {
      handler(response.status, response.data);
    }, (e) => {
      handler(e.data.status, e.data.data);
    });
  }
}

/**
 * Helper to verify config structure.
 * @param {Object} config - config for omise.js.
 */
export function verifyConfigStructure(config) {
  const result = {
    error: false,
    message: '',
  };

  if (!config.vaultUrl || !isUri(config.vaultUrl)) {
    result.message = 'Missing valutUrl';
  }
  else if (!config.cardHost || !isUri(config.cardHost)) {
    result.message = 'Missing cardHost';
  }
  else if (!config.cardUrl || !isUri(config.cardUrl)) {
    result.message = 'Missing cardUrl';
  }
  else if (!config.interfaceUrl || !isUri(config.interfaceUrl)) {
    result.message = 'Missing interfaceUrl';
  }

  result.error = result.message !== '';

  return result;
}

这是我导入它的地方

import React, { Component } from 'react';
import { Row, Col, Alert, Card, CardHeader, CardBody, FormGroup, Label, Input, CardFooter, Button } from 'reactstrap';

import Omo from '../../lib/omise.js/dist/omise';

class CardDetails extends Component {
  constructor() {
    super();
    this.handleCardInputChange = this.handleCardInputChange.bind(this);
    this.handleCardSubmit = this.handleCardSubmit.bind(this);
  }
  handleCardSubmit() {
    console.log(Omo);
    Omo.setPublicKey('pkey_test_5c3wgv7fgu8weckek64');
    const card = {
      name: this.state.card.ccname,
      number: this.state.card.ccnumber,
      expiration_month: this.state.card.ccmonth,
      expiration_year: this.state.card.ccyear,
      security_code: this.state.card.cccvv,
    };
    Omo.createToken('card', card, (statusCode, response) => {
      if (statusCode === 200) {
        // Success: send back the TOKEN_ID to your server to create a charge.
        // The TOKEN_ID can be found in `response.id`.
        console.log('success Response');
        console.log(response);
      } else {
        // Error: display an error message. Note that `response.message` contains
        // a preformatted error message. Also note that `response.code` will be
        // "invalid_card" in case of validation error on the card.

        // Example Error displaying
        Alert(`${response.code} : ${response.message}`);
      }
    });
  }
  handleCardInputChange(event) {
    console.log('----event----');
    console.log(event);
    const { target } = event;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    console.log('---------value--------');
    console.log(value);
    const { name } = target;

    this.setState({
      card: {
        [name]: value,
      },
    });
  }
  render() {
    return (
      <Row>
        <Col xs="12" sm="6">
          <Card>
            <CardHeader>
              <strong>Credit Card</strong>
              <small> Form</small>
            </CardHeader>
            <CardBody>
              <Row>
                <Col xs="12">
                  <FormGroup>
                    <Label htmlFor="name">Name</Label>
                    <Input type="text" name="ccname" id="name" placeholder="Enter your name" required onChange={this.handleCardInputChange} />
                  </FormGroup>
                </Col>
              </Row>
              <Row>
                <Col xs="12">
                  <FormGroup>
                    <Label htmlFor="ccnumber">Credit Card Number</Label>
                    <Input type="text" name="ccnumber" id="ccnumber" placeholder="0000 0000 0000 0000" required onChange={this.handleCardInputChange} />
                  </FormGroup>
                </Col>
              </Row>
              <Row>
                <Col xs="4">
                  <FormGroup>
                    <Label htmlFor="ccmonth">Month</Label>
                    <Input type="select" name="ccmonth" id="ccmonth" onChange={this.handleCardInputChange} >
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                      <option value="6">6</option>
                      <option value="7">7</option>
                      <option value="8">8</option>
                      <option value="9">9</option>
                      <option value="10">10</option>
                      <option value="11">11</option>
                      <option value="12">12</option>
                    </Input>
                  </FormGroup>
                </Col>
                <Col xs="4">
                  <FormGroup>
                    <Label htmlFor="ccyear">Year</Label>
                    <Input type="select" name="ccyear" id="ccyear" onChange={this.handleCardInputChange} >
                      <option>2017</option>
                      <option>2018</option>
                      <option>2019</option>
                      <option>2020</option>
                      <option>2021</option>
                      <option>2022</option>
                      <option>2023</option>
                      <option>2024</option>
                      <option>2025</option>
                      <option>2026</option>
                    </Input>
                  </FormGroup>
                </Col>
                <Col xs="4">
                  <FormGroup>
                    <Label htmlFor="cvv">CVV/CVC</Label>
                    <Input type="text" name="cccvv" id="cvv" placeholder="123" required onChange={this.handleCardInputChange} />
                  </FormGroup>
                </Col>
              </Row>
            </CardBody>
            <CardFooter>
              <Button onClick={this.handleCardSubmit}>Submit</Button>
            </CardFooter>
          </Card>
        </Col>
      </Row>
    );
  }
}

export default CardDetails;

我正在尝试使用setPublicKey函数和createToken函数，并出现上述错误。

我正在导入运行npm run build而不是原始Omise.js文件后创建的javascript文件。我是以错误的方式导入它吗？

Answer 1

导入后，您没有实例化该类。您只能以这种方式访问static班级成员。

...
handleCardSubmit() {
  // Instantiate the class
  const omo = new Omise(config);
  // Then use the methods
  omo.setPublicKey('pkey_test_5c3wgv7fgu8weckek64');
  ...
}
...

Answer 2

以下是我实施@CertainPerformance

的方法

＆＃13;

import Omo from '../../lib/omise.js/dist/omise';
import Config from '../../lib/omise.js/src/config';

class CardDetails extends Component {
  constructor() {
    super();
    this.handleCardInputChange = this.handleCardInputChange.bind(this);
    this.handleCardSubmit = this.handleCardSubmit.bind(this);
  }
  handleCardSubmit() {
    const Omise = new Omo(Config);
    console.log(Omo);
    Omise.setPublicKey('pkey_test_5c3wgv7fgu8weckek64');

＆＃13;

很抱歉我对此缺乏了解。现在我收到错误＆＃34; _omise2.default不是构造函数＆＃34;

导入默认类不会让我使用它的功能

2 个答案: