Question

我正在尝试执行功能并使用React导航并创建Axios帖子导航到下一个屏幕

我已经尝试过合并两个函数，但是似乎没有执行createOrder函数

如果我单独运行createOrder函数就可以了

onPress={
    () => {
        this.createOrder
        this.props.navigation.navigate('Cart', {
            order : this.state.order
        });
    }
}

 import React from 'react';
  import { 
    View,  
    StyleSheet, 
    Text,
    Image,
    TouchableOpacity
 } from 'react-native';
 //Redux
 import { connect } from 'react-redux';
 import { addItemToCart, removeItem } from '../../actions/ProductActionCreators';
//Products
 import Products from '../../components/products/Products';
 // Api Url
 import ApiUrl from '../../helpers/ApiUrl'
 //UI LIBRARY
 import { Input, Button } from 'react-native-elements';
 import {LinearGradient} from "../../components/LinearGradient";
 import { ButtonGroup } from 'react-native-elements';
 import Icon from "react-native-vector-icons/Ionicons";
 //AXIOS
 import axios from 'axios';

 export  class ProductsListView extends React.Component {
    constructor(props) {
        super(props);
        const { rows } = this.props.navigation.state.params;
        const arrays = Object.values( {rows});
        this.state = {
            arrays,
            filteredProducts: arrays,
            selectedIndex: 2
        };
        this.updateIndex = this.updateIndex.bind(this)
    }

  createOrder () {
    axios.post( ApiUrl + 'api/order/post', {
            code: "4f",
            status: "waiting",
            user_name: "salman", 
            user_id: 1,
            club_id: 1,
        })
    .then(response => {
      this.setState({
                order: response.data,
            });
            console.log('created order',this.state.order)
    })
    .catch(function (error) {
      console.log('error',error);
    })
  }

    updateIndex (selectedIndex) {
        this.setState({selectedIndex})
    }
    filterAll(){

    }
    filterStrong(){
        this.setState({
            arrays: this.state.arrays[0].products.filter(item => item.type == "strong" )
        })
        console.log(this.state.arrays)
    }
    filterNormal(){

    }
      render() {
        const component1 = () => <Icon
        name="ios-star"
        size={15}
        color="gold"
        />
        const component2 = () => <Icon
        name="ios-beer"
        size={15}
        color="gold"
        onPress={() => this.filterStrong}
        />
        const component3 = () => <Icon
        name="ios-wine"
        size={15}
        color="gold"

        />

        const buttons = [{ element: component1 }, { element: component2 }, { element: component3 }]
        const { selectedIndex } = this.state
        return (
            <View style={styles.container} >
                <Image 
                    style={styles.imageCard} 
                    source={
                            { 
                                uri: 
                                this.state.arrays[0].image
                            }
                        }
                />
                <Text style={styles.title} >
                    {this.state.arrays[0].name}
                </Text>


                <Products 
                    products={this.state.arrays[0].products} 
                    addItemToCart={this.props.addItemToCart} 
                    removeItem={this.props.removeItem}
                />  
                <View style={{
                    justifyContent:'center',
                    width: '100%',
                    padding: 50,
                    paddingTop:20,
                    }}>

                        <Button
                            title="Go to my cart"
                            containerStyle={{ flex: -1 }}
                            buttonStyle={styles.signUpButton}
                            linearGradientProps={{
                            colors: ['#dd016b', '#dd016b'],
                            start: [1, 0],
                            end: [0.2, 0],
                            }}
                            ViewComponent={LinearGradient}
                            titleStyle={styles.signUpButtonText}
                            // onPress={this.createOrder}                                 

                            onPress={
                                () => {
                                this.createOrder
                                this.props.navigation.navigate('Cart', {order : this.state.order});
                            }
                        }
                    />
                </View>
            </View>
        )
      }
    }
const mapDispatchToProps =  {
    addItemToCart,
    removeItem
}
export default connect(null, mapDispatchToProps) (ProductsListView);

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        width:'100%',
        backgroundColor: 'black',
    },
    signUpButtonText: {
        // fontFamily: 'bold',
        fontSize: 13,
    },
    signUpButton: {
        width: 250,
        borderRadius: 50,
        height: 45,
    },
    title: {
        color:'white',
        fontSize:32,
        height: 100,
        position: 'relative',
        backgroundColor: '#00000054',
        width: "100%",
        textAlign: 'center',
        paddingTop: 30,

    },
    imageCard:{
        height:100,
        width:'100%',
        position: "absolute",
        top: 0,
        backgroundColor: 'white'
    },
    button: {
        padding: 5,
        borderRadius: 25,
        margin: 5,
        backgroundColor: '#DD016B', 
        color: 'white',
        alignItems: 'center',
        justifyContent: 'center',
    }, 
})

我正尝试使用从Axios帖子中获得的数据导航到下一个屏幕。

Answer 1

您没有调用createOrder函数。

尝试一下：

<Button
    title="Go to my cart"
    containerStyle={{ flex: -1 }}
    buttonStyle={styles.signUpButton}
    linearGradientProps={{
        colors: ["#dd016b", "#dd016b"],
        start: [1, 0],
        end: [0.2, 0]
    }}
    ViewComponent={LinearGradient}
    titleStyle={styles.signUpButtonText}
    // onPress={this.createOrder}

    onPress={this.onGoToMyCartPressed} 
/>;

onGoToMyCartPressed如下所示：

onGoToMyCartPressed = () => {
    this.createOrder(); // <- Call the function
    this.props.navigation.navigate("Cart", { order: this.state.order });
};

而且，如果要在创建订单后导航，则让createOrder返回承诺，可以在{{1} }

像这样：

onGoToMyCartPressed

并修改createOrder() { // Return the promise from here return axios.post( ApiUrl + 'api/order/post', { code: "4f", status: "waiting", user_name: "salman", user_id: 1, club_id: 1, }).then(response => { this.setState({ order: response.data, }); console.log('created order',this.state.order) }).catch(function (error) { console.log('error',error); }) }以使用返回的承诺。

onGoToMyCartPressed

执行多种功能OnPress

1 个答案: