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

Question

请帮助。在本机博览会中做出反应。我正在使用 react-native-gesture-handler Swipeable 问题是我不知道如何在此处添加更新状态 API。一旦我刷它来收集样本，它应该对收集的样本保持不变。我用过 redux 我把我所有的代码都放在下面

在我的操作中，我放了 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 ...