無法加載方法陣營組件

我有一個使用Axios公司作出API調用JSX文件：

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

我有一個引用該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'));

然而，當的WebPack編譯項目，這些項目在瀏覽器中運行，我得到以下錯誤：

TypeError: Cannot read property 'shareMyStoryData' of undefined

有一些爲什麼在share-my-story.jsx文件中shareMyStoryData（）方法不可用？這兩個文件都在同一個文件夾中，並且我可以看到fetch-api-data.jsx和share-my-story.jsx文件正在我的bundle.js文件中正確捆綁在一起。

來源

2017-08-28 TWLATL

您的fetch-api-data.jsx 3個問題：

的您應export default代替export。
您在constructor方法中犯了拼寫錯誤。
您已添加shareMyStoryDataclass方法，但未使用它創建類實例。也許它應該是static？

退房固定例如：

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

來源

2017-08-28 19:32:09

即使算上構造錯字，還是得到同樣的錯誤這種變化：'遺漏的類型錯誤：無法讀取屬性「shareMyStoryData」未定義' – TWLATL

@TWLATL我更新了答案，將'static'關鍵字添加到'shareMyStoryData'。 –

是的，你是對的！ - 不創建類實例，不使用靜態是問題。非常感謝！ – TWLATL

您應該將您的班級導出爲默認班級或將其導入括號中。

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

import myFunc from 'myfunc.js';

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

import { myFunc } from 'myfunc.js';

來源

2017-08-28 19:20:19 bennygenel

無法加載方法陣營組件

回答

相關問題