反应本机问题

时间:2019-11-25 10:36:25

标签: javascript react-native axios

我正在构建使用Wordpress API的React本机应用程序。我在显示购物车时遇到问题,并收到此错误。

  

对象{}错误[错误:请求失败,状态码为404]   未定义

我已经尝试了一切,并发现可能是Axios的问题...

请为我提供建议...

CartAction.js

import *  as types from '../constants/ActionTypes';
import CartApi from '../api/CartApi';

export function getCart() {
    return (dispatch) => {
        return CartApi.getCart().then(cart => {
            dispatch(getCartSuccess(cart));
        }).catch(err => {
            //TODO:get correct error msg
            console.log(err.error);
        })
    };
}

function getCartSuccess(cart) {
    return {
        type: types.GET_CART_SUCCESS,
        cart
    };
}

export function addToCart(product, quantity) {
    return (dispatch) => {
        return CartApi.addToCart(product, quantity).then(cartUpdate => {
            dispatch(addToCartSuccess(cartUpdate));
        }).catch(err => {
            //TODO:get correct error msg
            console.log('error',err);
        })
    };
}

function addToCartSuccess(cartUpdate) {
    return {
        type: types.ADD_TO_CART_SUCCESS,
        cartUpdate
    };
}

CartPage.js

import React from 'react'
import { StyleSheet, Text, View, FlatList, Image } from 'react-native'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import * as CartAction from '../../actions/CartAction';

class CartPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cart: {}
    }
  }

  componentDidMount() {
    this.props.CartAction.getCart();
  }

  _keyExtractor = (item, index) => item.key;

  render() {
    console.log(this.props.cart)
    const cartObject = this.props.cart;
    var cartArray = [];
    Object.keys(cartObject).forEach(function(key) {
      cartArray.push(cartObject[key]);
    });
    const Items = <FlatList contentContainerStyle={styles.list}
      data={cartArray}
      keyExtractor={this._keyExtractor}
      renderItem={({ item }) => 
      // <TouchableHighlight style={{width:'50%'}} onPress={() => navigate("Product", { product: item })} underlayColor="white">
        <View style={styles.lineItem} >
          <Image style={styles.image} source={{uri: item.product_image}} />
          <Text style={styles.text}>{item.product_name}</Text>
          <Text style={styles.text}>{item.quantity}</Text>
        </View>
      // </TouchableHighlight>
      }
    />;
    return (
      <View style={styles.container}>
        {Items}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  lineItem: {
    flexDirection: 'row'
  },
  list: {
    flexDirection: 'column'
  },
  image: {
    width: 50, 
    height: 50
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 20,
    padding: 5
  }
})

function mapStateToProps(state) {
	return {
		cart: state.cart
	};
}

function mapDispatchToProps(dispatch) {
	return {
		CartAction: bindActionCreators(CartAction, dispatch)
	};
}

export default connect(mapStateToProps, mapDispatchToProps)(CartPage);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

0 个答案:

没有答案