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

有没有理由说明share-my-story.jsx文件中的shareMyStoryData（）方法不可用？这两个文件都在同一个文件夹中，我可以看到fetch-api-data.jsx和share-my-story.jsx文件在我的bundle.js文件中正确捆绑在一起。

Answer 1

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

您应该export default而不是export。
您在constructor方法中犯了拼写错误。
您添加了shareMyStoryData class方法，但在没有创建类实例的情况下使用了它。也许它应该是static？

查看固定示例：

＆＃13;

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

＆＃13;

Answer 2

您应该将您的类导出为默认值，或者使用括号将其导入。

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

import myFunc from 'myfunc.js';

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

import  { myFunc } from 'myfunc.js';

React组件中的故障加载方法

2 个答案: