reactjs - How to export and import class properly in javascript ES6 - Stack Overflow

admin管理员组

文章数量:1356332

Could someone provide me with a little bit of guidance on my class object and how to reference it in another in my project?

Here is my RequestAPI object - request-api.js (note: I understand that there isn't much going on in it yet, but I wanted to walk before I can run)

export class RequestApi {
    constructor() {
        this.apiBase = '../api';
    }

    fetch(url, options) {
        var options = options || {};
        return fetch(this.apiBase + url, options)
            .then(_handleResponse, _handleNetworkError);
    }

    _handleResponse(response) {
        if (response.ok) {
            return response.json();
        } else {
            return response.json().then(function (error) {
                throw error;
            });
        }
    }

    _handleNetworkError(error) {
        throw {
            msg: error.message
        };
    }
}

Here is the React Class ponent that i am trying to reference it in:

import React from 'react';
import { RequestApi } from '../../../../utils/request-api.js';

class UserLayout extends React.Component {
    constructor() {
        super();
        this.state = {
            users: [],
            isLoading: true
        };
        this.addNewUser = this.addNewUser.bind(this);
        this.editUser = this.editUser.bind(this);
        this.deleteUser = this.deleteUser.bind(this);
    }
    ponentDidMount() {
        return RequestApi.fetch('/user')
            .then(json => {
                this.setState({
                    isLoading: false,
                    users: json
                });
            })
            .catch(error => {
                console.error(error.msg);
            });
    }
    // more code here...
}

I get an error in my React Component Class object: Uncaught TypeError: _requestApi.RequestApi.fetch is not a function

Can anyone provide me with some insight/assistance?

Could someone provide me with a little bit of guidance on my class object and how to reference it in another in my project?

Here is my RequestAPI object - request-api.js (note: I understand that there isn't much going on in it yet, but I wanted to walk before I can run)

export class RequestApi {
    constructor() {
        this.apiBase = '../api';
    }

    fetch(url, options) {
        var options = options || {};
        return fetch(this.apiBase + url, options)
            .then(_handleResponse, _handleNetworkError);
    }

    _handleResponse(response) {
        if (response.ok) {
            return response.json();
        } else {
            return response.json().then(function (error) {
                throw error;
            });
        }
    }

    _handleNetworkError(error) {
        throw {
            msg: error.message
        };
    }
}

Here is the React Class ponent that i am trying to reference it in:

import React from 'react';
import { RequestApi } from '../../../../utils/request-api.js';

class UserLayout extends React.Component {
    constructor() {
        super();
        this.state = {
            users: [],
            isLoading: true
        };
        this.addNewUser = this.addNewUser.bind(this);
        this.editUser = this.editUser.bind(this);
        this.deleteUser = this.deleteUser.bind(this);
    }
    ponentDidMount() {
        return RequestApi.fetch('/user')
            .then(json => {
                this.setState({
                    isLoading: false,
                    users: json
                });
            })
            .catch(error => {
                console.error(error.msg);
            });
    }
    // more code here...
}

I get an error in my React Component Class object: Uncaught TypeError: _requestApi.RequestApi.fetch is not a function

Can anyone provide me with some insight/assistance?

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow edited Jan 11, 2019 at 15:18 Neuron 5,91155 gold badges4343 silver badges6262 bronze badges asked Sep 14, 2017 at 16:58 scapegoat17scapegoat17 5,8511717 gold badges6161 silver badges101101 bronze badges 2

• 2 Try var requestApi = new RequestApi(); requestApi.fetch() – Shubham Khatri Commented Sep 14, 2017 at 17:00
• Classes usually need to be instantiated. If you don't want that, then export a simple object instead of a class. – Felix Kling Commented Sep 14, 2017 at 17:08

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Since fetch is not a static method, you need to create an instance of RequestApi prior to calling fetch on it:

ponentDidMount() {
    const api = new RequestApi();
    return api.fetch('/user')
        .then(json => {
            this.setState({
                isLoading: false,
                users: json
            });
        })
        .catch(error => {
            console.error(error.msg);
        });
}

本文标签： reactjsHow to export and import class properly in javascript ES6Stack Overflow