react本地axios发布请求两次

0g0grzrc  于 2023-04-07  发布在  React
关注(0)|答案(1)|浏览(220)

axios发布了两次请求。第一次，它在数据库中存储了一个空数据。第二次，它在数据库中存储了我放的数据。
这是密码

import React, { useState } from "react";
import { useNavigation } from "@react-navigation/native";
import { A } from "@expo/html-elements";
import { LogoImage } from "../assets/";
import MaterialIcons from "react-native-vector-icons/MaterialIcons";
import Checkbox from "expo-checkbox";
import axios from "axios";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { View, Text, Image, ScrollView, Pressable } from "react-native";
import {
  NativeBaseProvider,
  Button,
  FormControl,
  Input,
  Select,
} from "native-base";

const SignUp = (props) => {
  const navigation = useNavigation();
  const [show, setShow] = useState(false);
  const [isCondition, SetIsCondition] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [inputData, setInputData] = useState({
    userName: "",
    password: "",
    lastName: "",
    job: "",
    jobCategory: "",
  });
  
  const [isDataEmpty, setIsDataEmpty] = useState({
    userName: false,
    password: false,
    lastName: false,
    job: false,
    jobCategory: false,
  });

  const submitData = () => {
    if (
      inputData.userName != "" &&
      inputData.password.length >= 8 &&
      inputData.lastName != "" &&
      inputData.job != "" &&
      inputData.jobCategory != "" &&
      isCondition
    ) {
      // api
      setIsLoading(true);

      axios({
        method: "POST",
        url: "http://localhost/chantier237/API/AUTH/st_signup.php",
        responseType: "json",
        headers: { "Access-Control-Allow-Origin": "*" },
        data: {
          userName: inputData.userName,
          password: inputData.password,
          lastName: inputData.lastName,
          job: inputData.job,
          jobCategory: inputData.jobCategory,
        },
      })
        .then((response) => {
          console.log(response.data);
          if (response.data.status == "ERROR") {
            //TOAST THE ERROR
            console.log(response.data.message);
          } else {
            // save the datauser in state and in local

            AsyncStorage.setItem(
              "st_chantier237_user",
              JSON.stringify({
                userId: response.data.data.id,
                isAbonned: response.data.data.is_abon,
                dateAbonned: response.data.data.date_abon,
              })
            );

            props.setStateUser({
              userId: response.data.data.id,
              isAbonned: response.data.data.is_abon,
              dateAbonned: response.data.data.date_abon,
            });
          }
          // navigation.replace("Home");
        })
        .catch((error) => {
          // toat error
          console.log(error);
        })
        .finally(() => {
          setIsLoading(false);
        });
    } else {
      if (inputData.userName == "") {
        setIsDataEmpty((prev) => {
          return { ...prev, userName: true };
        });
      } else {
        setIsDataEmpty((prev) => {
          return { ...prev, userName: false };
        });
      }
      if (inputData.password.length < 8) {
        setIsDataEmpty((prev) => {
          return { ...prev, password: true };
        });
      } else {
        setIsDataEmpty((prev) => {
          return { ...prev, password: false };
        });
      }
      if (inputData.lastName == "") {
        setIsDataEmpty((prev) => {
          return { ...prev, lastName: true };
        });
      } else {
        setIsDataEmpty((prev) => {
          return { ...prev, lastName: false };
        });
      }
      if (inputData.job == "") {
        setIsDataEmpty((prev) => {
          return { ...prev, job: true };
        });
      } else {
        setIsDataEmpty((prev) => {
          return { ...prev, job: false };
        });
      }
      if (inputData.jobCategory == "") {
        setIsDataEmpty((prev) => {
          return { ...prev, jobCategory: true };
        });
      } else {
        setIsDataEmpty((prev) => {
          return { ...prev, jobCategory: false };
        });
      }
      if (!isCondition) {
        console.log("condition not");
      }
    }
  };

  return (
    <NativeBaseProvider>
      <ScrollView className="bg-white flex-1">
        <View className="items-center justify-center pt-7 w-full pb-10">
          <View className="w-32 h-32 mb-2">
            <Image source={LogoImage} className="w-full h-full object-cover" />
          </View>
          <View className="flex-col items-center justify-center w-full">
            <Text className="text-[30px] text-[black] mb-1 text-bold">
              Inscription
            </Text>
            <Text>creer votre compte</Text>
          </View>

          <View className="w-full px-8 items-center justify-center flex-col pt-5 gap-5">
            <FormControl isInvalid={isDataEmpty.userName}>
              <Input
                placeholder="Nom d'utilisateur"
                type="text"
                className="text-sm"
                name="userName"
                onChangeText={(value) =>
                  setInputData({ ...inputData, userName: value })
                }
              />
              <FormControl.HelperText>
                Veuillez renseigner un seul nom
              </FormControl.HelperText>
              <FormControl.ErrorMessage>
                Ce champ ne doit pas etre vide.
              </FormControl.ErrorMessage>
            </FormControl>

            <FormControl isInvalid={isDataEmpty.lastName}>
              <Input
                placeholder="Votre nom"
                type="text"
                className="text-sm"
                onChangeText={(value) =>
                  setInputData({ ...inputData, lastName: value })
                }
              />
              <FormControl.ErrorMessage>
                Ce champ ne doit pas etre vide.
              </FormControl.ErrorMessage>
            </FormControl>

            <FormControl isInvalid={isDataEmpty.password}>
              <Input
                placeholder="Mot de passe"
                type={show ? "text" : "password"}
                className="text-sm"
                onChangeText={(value) =>
                  setInputData({ ...inputData, password: value })
                }
                InputRightElement={
                  <Pressable onPress={() => setShow(!show)}>
                    <MaterialIcons
                      name={show ? "visibility" : "visibility-off"}
                      size={25}
                      mr="2"
                      color="black"
                      style={{ marginRight: 13 }}
                    />
                  </Pressable>
                }
              />
              <FormControl.ErrorMessage>
                Le mot de passe doit contenir au moins 8 caracteres
              </FormControl.ErrorMessage>
            </FormControl>

            <FormControl isInvalid={isDataEmpty.job}>
              <Input
                placeholder="Nom de votre metier"
                type="text"
                className="text-sm"
                onChangeText={(value) =>
                  setInputData({ ...inputData, job: value })
                }
              />
              <FormControl.ErrorMessage>
                Ce champ ne doit pas etre vide.
              </FormControl.ErrorMessage>
            </FormControl>

            <FormControl isInvalid={isDataEmpty.jobCategory}>
              <Select
                accessibilityLabel="Selectionner votre categorie"
                placeholder="Selectionner votre categorie"
                className="text-sm"
                _selectedItem={{
                  bg: "teal.600",
                }}
                mt="1"
                onValueChange={(value) =>
                  setInputData({ ...inputData, jobCategory: value })
                }
              >
                <Select.Item label="UX Research" value="ux" />
                <Select.Item label="Web Development" value="web" />
                <Select.Item label="Cross Platform Development" value="cross" />
                <Select.Item label="UI Designing" value="ui" />
                <Select.Item label="Backend Development" value="backend" />
              </Select>
              <FormControl.ErrorMessage>
                Ce champ ne doit pas etre vide.
              </FormControl.ErrorMessage>
            </FormControl>

            <FormControl className="w-full px-7">
              <View className="flex-row text-center items-center justify-start">
                <Checkbox
                  value={isCondition}
                  onValueChange={SetIsCondition}
                  color="blue"
                />
                <Text className="text-center text-sm">
                  J'accepte les{" "}
                  <A
                    href="https://stcode-portfolio.netlify.app"
                    style={{
                      color: "blue",
                      textDecorationLine: "underline",
                    }}
                  >
                    termes et conditions d'utilisation{" "}
                  </A>
                  et la{" "}
                  <A
                    href="https://stcode-portfolio.netlify.app"
                    style={{
                      color: "blue",
                      textDecorationLine: "underline",
                    }}
                  >
                    politique de confidentialite
                  </A>
                </Text>
              </View>
            </FormControl>

            <Button
              style={{
                backgroundColor: "black",
                width: "100%",
                height: 60,
                borderRadius: 7,
                fontSize: 25,
              }}
              onPress={submitData}
              size="lg"
              colorScheme="black"
              isLoading={isLoading}
              isLoadingText="Inscription"
            >
              S'inscrire
            </Button>

            <Text className="items-center justify-center w-full text-center">
              Vous avez deja un compte ?{"  "}
              <Text
                className="text-[15px] text-blue-700"
                onPress={() => {
                  navigation.navigate("Signin");
                }}
              >
                Connectez-vous
              </Text>
            </Text>
          </View>
        </View>
      </ScrollView>
    </NativeBaseProvider>
  );
};

export default SignUp;

当我点击按钮运行后的请求与axios，它执行两次.我看到它，因为他们是两个新的记录在数据库中.第一个记录是空的，第二个其中包含的数据.

react-native

1条答案

按热度按时间
piv4azn7

piv4azn71#

首先

使用控制台日志检查

if (
      inputData.userName != "" &&
      inputData.password.length >= 8 &&
      inputData.lastName != "" &&
      inputData.job != "" &&
      inputData.jobCategory != "" &&
      isCondition
    )

让你不想要的状态通过。
我推荐使用
console.log({inputData,isCondition})这一行会告诉你哪里出错了。

第二

我看到你有isLoading状态。如果它是真的，你可以通过禁用按钮来很好地使用它，或者将它添加到你的第一个if中以阻止submitData，如果它正在加载，则可以进一步使用它。

赞(0）分享  回复(0）举报  2023-04-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com