在react-native-gesture-handler/Swipeable中如何添加post API

Question

请帮忙。在react native expo中。我使用的是react-native-gesture-handler Swipeable问题是我没有得到它如何在这里添加更新状态API。一旦我滑动它来收集样本，它应该保持恒定的样本收集。我使用了redux，我把我所有的代码都放在

下面在我的actions中我放了API URL

export const updateStatus = (collected) => {
return async (dispatch) => {
const token = await SecureStore.getItemAsync("userToken");
const url = `/update-status`;
var formdata = new FormData();
formdata.append("Booking_no", "");
formdata.append("action ", collected );
const response = await api
.post(url, {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
return res;
})
.catch((error) => {
return error.response;
});
dispatch({
type: "UPDATE_STATUS",
payload: response,
});
};
};

在减速机

case "UPDATE_STATUS": {
if (action.payload.status === 200) {
let newState = {
...state,
updatestatus: true,
};
return newState;
} else {
let newState = {
...state,
updatestatus: false,
};
return newState;
}
}

在组件

import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
Image,
Linking,
ActivityIndicator,
ScrollView,
} from "react-native";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import Swipeable from "react-native-gesture-handler/Swipeable";
import Sampleitems from "./Sampleitems";
import { fetchBookingDetails, updateStatus } from "../../../../../actions";
import { connect } from "react-redux";
import { TouchableHighlight } from "react-native-gesture-handler";
class Orderitems extends Component {
constructor(props) {
super(props);
this.state = {
showMe: true,
};
}
componentDidMount() {
this.props.fetchBookingDetails(this.props.route.params.booking_id);

setTimeout(() => {
this.setState({
showMe: false,
});
}, 3000);
}
render() {
const LeftSwipeActions = () => {
return (
<View style={[styles.container1, styles.horizontal]}>
{this.state.showMe ? (
<View style={{ alignSelf: "center" }}>
<ActivityIndicator size="large" color="#4DB2F8" />
</View>
) : (
<View style={styles.sampleMain}>
<Text style={styles.sample}>Samples Collected</Text>
</View>
)}
</View>
);
};
let bookingtest = this.props.bookinglist;
const items =
bookingtest && bookingtest.items && bookingtest.items.length > 0 ? (
bookingtest.items.map((booking_test) => {
return (
<Sampleitems
key={booking_test.id}
quantity={
booking_test && booking_test.test ? (
<View
style={{
borderRadius: 5,
borderWidth: 1,
borderColor: "#4D4D4D",
height: 30,
width: 30,
paddingTop: 5,
}}
>
<Text style={{ textAlign: "center", fontSize: 12 }}>
1 x
</Text>
</View>
) : null
}
test={
booking_test && booking_test.test ? (
booking_test.test.test_name
) : (
<View style={{ alignSelf: "center" }}>
<Text style={{ color: "#A1E1F3" }}>No Test Available</Text>
</View>
)
}
/>
);
})
) : (
<View style={{ alignSelf: "center" }}>
<Text style={{ color: "#A1E1F3" }}>No Test Available</Text>
</View>
);
const { navigation, family } = this.props;
let bookdata = this.props.family_data;

return (

<View style={styles.container} key={bookdata.id}>
<ScrollView>

<View style={{ margin: 15, marginBottom: 100, marginTop: 100 }}>
<View style={{ borderRadius: 10 }}>
<View style={{ padding: 20, backgroundColor: "white" }}>
<View
style={{ flex: 1, flexDirection: "row", paddingRight: 15 }}
>
<View
style={{
borderRadius: 5,
backgroundColor: "#4D4D4D",
height: 30,
width: 30,
paddingTop: 4,
}}
>
<Image
source={require("../../../../../assets/delivery/placeholder.png")}
resizeMode="contain"
tintColor="white"
style={{
height: 20,
width: 20,
alignSelf: "center",
}}
/>
</View>
<View style={{ paddingRight: 2, paddingLeft: 10 }}>
<Text style={{ fontWeight: "bold", color: "black" }}>
{bookdata && bookdata.family
? bookdata.family.name
: null}
</Text>
<Text style={{ fontSize: 12 }}>
{bookdata && bookdata.family
? bookdata.family.mobile
: null}
</Text>
<Text style={{ paddingBottom: 5, fontSize: 12 }}>
{bookdata && bookdata.family
? bookdata.family.adr_line_1
: null}
</Text>
<View style={{ flexDirection: "row" }}>
<TouchableHighlight
style={{ width: "130%" }}
underlayColor="transparent"
onPress={() => {
Linking.openURL(
`http://maps.google.com/?q=${
bookdata && bookdata.family
? bookdata.family.adr_line_1
: null
}`
);
}}
>
<View
style={{
backgroundColor: "#202877",
flexDirection: "row",
padding: 10,
paddingLeft: 0,
paddingRight: 0,
borderRadius: 7,
justifyContent: "center",
// width: "80%",
}}
>
<MaterialCommunityIcons
name="directions"
style={{ color: "white" }}
size={20}
/>
<Text
style={{
color: "white",
alignSelf: "center",
fontSize: 10,
paddingRight: 5,
}}
>
Get Direction
</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={{ width: "150%" }}
underlayColor="transparent"
onPress={() => {
Linking.openURL(
`tel:${
bookdata && bookdata.family
? bookdata.family.mobile
: null
}`
);
}}
>
<View
style={{
backgroundColor: "#202877",
flexDirection: "row",
padding: 10,
borderRadius: 7,
paddingLeft: 0,
paddingRight: 0,
justifyContent: "center",

marginLeft: 40,
}}
>
<MaterialCommunityIcons
name="cellphone"
style={{ color: "white" }}
size={20}
/>
<Text
style={{
color: "white",
alignSelf: "center",
fontSize: 10,
paddingRight: 5,
}}
>
Call Now
</Text>
</View>
</TouchableHighlight>
</View>
</View>
</View>
</View>
</View>
<View style={{ borderRadius: 10, marginTop: 30 }}>
<View
style={{
flex: 1,
flexDirection: "row",
padding: 20,
backgroundColor: "#FAFAFA",
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
}}
>
<Image
source={require("../../../../../assets/delivery/menu.png")}
resizeMode="contain"
style={{
width: 15,
height: 15,
alignSelf: "center",
}}
/>
<Text style={{ fontSize: 17 }}> Sample Items </Text>
</View>
<View style={{ padding: 20, backgroundColor: "white" }}>

{items}
</View>
</View>
</View>
</ScrollView>
{/* header  */}
<View
style={{
flex: 1,
top: 0,
right: 0,
left: 0,
paddingTop: 35,
paddingBottom: 10,
position: "absolute",
backgroundColor: "white",
shadowColor: "black",
shadowOffset: {
width: 0,
height: 12,
},
shadowOpacity: 1,
shadowRadius: 16.0,
elevation: 2,
}}
>
<View
style={{
flex: 1,
backgroundColor: "white",
padding: 10,
flexDirection: "row",
}}
>
<MaterialCommunityIcons
style={{ alignSelf: "center" }}
name="chevron-left"
size={26}
onPress={() => navigation.goBack(null)}
/>
<Text
style={{
fontSize: 17,
fontWeight: "800",
alignSelf: "center",
paddingLeft: 40,
}}
>
#{bookdata.booking_no}
</Text>
</View>
</View>
{/* footer  */}
<View
style={{
flex: 1,
bottom: 0,
right: 0,
left: 0,
position: "absolute",
}}
>
<Swipeable renderLeftActions={LeftSwipeActions}>
<View style={styles.collectMainMain}>
<MaterialCommunityIcons
name="chevron-right"
style={styles.material}
size={20}
/>
<View style={styles.collectMain}>
<Text style={styles.collect}>Collect Samples</Text>
</View>
</View>
</Swipeable>
</View>
</View>
);
}
_onLoadEnd = () => {
this.setState({
loading: false,
});
};
}


const mapStateToProps = (state) => {
return {
family_data: state.detailData.booking_details,
bookinglist: state.detailData.booking_details,
update_status: state.detailData.updatestatus,
};
};
export default connect(mapStateToProps, {
fetchBookingDetails,
updateStatus,
})(Orderitems);```

Answer 1

不要检查你的减速机上的状态码。你可以很容易地检查你的api.post，然后发送一个适当的动作到减速机:

const response = await api
.post(url, {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
return res.json();
})
.then(res => {
if(res.status === 200) {
dispatch({
type: "UPDATE_STATUS_SUCCESS",
})
} else {
dispatch({
type: "UPDATE_STATUS_FAILURE",
})
}
})
.catch((error) => {
console.log(error);
dispatch({
type: "UPDATE_STATUS_FAILURE",
})
});

现在，如果响应状态为200，则将调度适当的动作，如果有错误或样品UPDATE_STATUS_FAILURE将调度。

在减速机中:

// rest of the codes ...
case "UPDATE_STATUS_SUCCESS":
return{
...state,
updateStatus: true,
}
case "UPDATE_STATUS_FAILURE":
return{
...state,
updateStatus: false
}
// rest of the codes ...