React组件中的故障加载方法

Question

反应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

是否有一些原因导致shareMyStoryData()方法在share-my-story.jsx文件中不可用？这两个文件都在同一个文件夹中,我可以看到fetch-api-data.jsx和share-my-story.jsx文件在我的bundle.js文件中正确捆绑在一起.

Answer 1

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

1. 你应该用你export default来代替export。
2. 你犯了拼写错误 constructor 。
3. 您添加了shareMyStoryData 类方法，但在没有创建类实例的情况下使用了它。也许应该是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);
    });
  }
}