Kłopoty Metoda Ładowanie w React Komponent

Question

React problem NOOB mam:

Mam plik JSX który używa Axios do inicjowania połączeń API:

fetch-api-data.jsx:

import * as axios from 'axios'; 
 

 
export class FetchApiData { 
 
    constructor() { 
 
    console.log('FetchAPIData loaded'); 
 
    } 
 

 
    shareMyStoryData(URL) { 
 
    return axios.get(URL) 
 
    .then(function (response) { 
 
     console.log(response.data); 
 
    }) 
 
    .catch(function (error) { 
 
     console.log(error); 
 
    }); 
 
    } 
 
}

Mam komponent odwołujący się do tej funkcji API:

share-my-story.jsx

import * as React from 'react'; 
 
import * as DOM from 'react-dom'; 
 
import PropTypes from 'prop-types'; 
 
import './share-my-story.scss'; 
 
import FetchApiData from './fetch-api-data'; 
 

 
class ShareMyStory extends React.Component { 
 

 
    componentDidMount() { 
 
    const URL = '/js/feed/sms.json'; 
 
    const smsData = FetchApiData.shareMyStoryData(URL); 
 
    console.log('shareMyStory.jsx - componentDidMount: load: ' + URL); 
 
    } 
 

 
    render() { 
 
     return (
 
      <div className="item"> 
 
      <h3>{headline}</h3> 
 
      <h4>{name}</h4> 
 
      <p>{link}</p> 
 
      </div> 
 

 
    ); 
 
    } 
 
} 
 

 
ShareMyStory.propTypes = { 
 
    name: PropTypes.string, 
 
    headline: PropTypes.string, 
 
    link: PropTypes.string, 
 
} 
 

 
DOM.render(
 
    <ShareMyStory/>, document.getElementById('share-my-story'));

Jednak gdy WebPack kompiluje elementy i są one uruchamiane w przeglądarce pojawia się następujący błąd:

TypeError: Cannot read property 'shareMyStoryData' of undefined

Czy jest jakiś Dlaczego metoda shareMyStoryData() nie jest dostępna w pliku share-my-story.jsx? Oba pliki znajdują się w tym samym folderze i widzę, że oba pliki fetch-api-data.jsx i share-my-story.jsx są prawidłowo pakowane razem w pliku bundle.js.

Answer 1

Masz 3 problemy w fetch-api-data.jsx:

1. Powinieneś pan export default zamiast export.
2. Wprowadziłeś błąd w pisowni metodą constructor.
3. Użytkownik dodał metodę shareMyStoryDataclass, ale użył jej bez tworzenia instancji klasy. Może to powinno być static?

Sprawdź stałej przykład:

import * as axios from 'axios'; 
 

 
export default class FetchApiData { 
 
    constructor() { 
 
    console.log('FetchAPIData loaded'); 
 
    } 
 

 
    static shareMyStoryData(URL) { 
 
    return axios.get(URL) 
 
    .then(function (response) { 
 
     console.log(response.data); 
 
    }) 
 
    .catch(function (error) { 
 
     console.log(error); 
 
    }); 
 
    } 
 
}

Answer 2

Powinieneś wyeksportować swoją klasę jako domyślną lub zaimportować ją w nawiasach.

const myFunc =() => {...}; 
export default myFunc; 

import myFunc from 'myfunc.js'; 

---

const myFunc =() => {...}; 
export myFunc; 

import { myFunc } from 'myfunc.js';