React 组件中的故障加载方法

Question

我遇到的 React NOOB 问题：

我有一个使用 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 文件中。

Answer 1

您应该将 class 导出为默认值或用括号导入。

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

import myFunc from 'myfunc.js';

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

import  { myFunc } from 'myfunc.js';

Answer 2

您的 fetch-api-data.jsx 有 3 个问题：

你应该 export default instead of export.
您在 constructor 方法中犯了拼写错误。
您添加了 shareMyStoryData class method but used it without creating a class instance. Maybe it should be 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);
    });
  }
}

React 组件中的故障加载方法

Trouble Loading Method in React Component

javascript

jsx

ecmascript-6

reactjs

es6-class