javascript - 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 编译项目并在浏览器中运行它们时，出现以下错误:

类型错误:无法读取未定义的属性“shareMyStoryData”

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

Answer 1

你的 fetch-api-data.jsx 有 3 个问题:

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