Question

我将我的应用程序改为github-pages。现在我的fetch无法获取数据。在localhost中一切都很棒。我注意到url是不同的，在localhost url是

https://api.punkapi.com/v2/beers?page=1&per_page=80

以上网址是正确的但是当我在github-pages中打开app时，我得到的错误就是这样

无法加载资源：服务器响应状态为400（）api.punkapi.com/v2/beers/Favourite-Beers

＆＃39;喜欢 - 比尔＆＃39;是我的应用程序的名称。

我使用create-react-app，react-router，redux和redux-thunk。

这是我在行动中的功能

export const getBeers = () => dispatch => {

  dispatch(getBeersRequested());

  fetch('https://api.punkapi.com/v2/beers?page=1&per_page=80')
    .then(response => response.json())
    .then(data => {
      dispatch(getBeersDone(data));
    })
    .catch(error => {
      dispatch(getBeersFailed(error));
    })
}

我在componentDidMount

中运行此函数

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import BeerItem from '../components/BeerItem';
import { getBeers } from '../actions/index';


const mapStateToProps = state => {
  return {
    beerList: state.beers.beers,
    isError: state.beers.isError,
    isLoading: state.beers.isLoading,
   };
};

class BeerList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      num: 20
    }
  }
  componentDidMount() {
    const { getBeers } = this.props;
    getBeers();
  }


  loadMore = () => {
    this.setState({
      num: this.state.num+20
    })
  }

  render() {
    const { beerList, isError, isLoading } = this.props;

    if(isError) {
      return <p className='error-info'>Error!</p>
    }

    if(isLoading) {
      return (
        <div className="spinner">
          <div className="double-bounce1"></div>
          <div className="double-bounce2"></div>
        </div>
      )
    }

    return (
      <div>
        <ul className='beer-list'>
          {beerList.slice(0, this.state.num).map( beer => (
            <li key={beer.id}>
              <BeerItem
                beer={beer}
              />
            </li>
          ))}
        </ul>
        {(this.state.num < beerList.length) &&
          <button className='btn-more' onClick={this.loadMore} >More</button>
        }
      </div>
    )
  }
}

const Beers = connect(mapStateToProps, { getBeers })(BeerList);

BeerList.propTypes = {
  beerList: PropTypes.array.isRequired,
  isError: PropTypes.bool,
  isLoading: PropTypes.bool
};

export default Beers

部署到github页面

0 个答案: