React Native中Axios Post请求无响应问题排查

问题描述 #

开发带有后端API的React Native应用时，调用axios.post完成用户注册，MongoDB数据库已成功写入用户数据，但前端控制台无法打印response信息，也无法弹出注册成功提示框。

相关代码 #

Register.js #

const [name, setName] = useState("")
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const navigation = useNavigation()


const handleRegister = () => {
    const user = {
        name: name,
        email: email,
        password: password
    }
    console.log(user)

    axios.post("http://localhost:8000/register", user).then((response) => {
        console.log(response);
        Alert.alert(
        "Registration successful",
        "You have been registered Successfully"
        );
        setName("");
        setEmail("");
        setPassword("");
    }).catch((error) => {
        Alert.alert(
        "Registration Error",
        "An error occurred while registering"
        );
        console.log("registration failed", error);
    });
}

return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "white", alignItems: "center" }}>
        <View>
            <Image style={{ width: 150, height: 100, marginTop: 12 }} source={{
                uri: "https://i.pinimg.com/originals/01/ca/da/01cada77a0a7d326d85b7969fe26a728.jpg",
            }}/>
        </View>

        <KeyboardAvoidingView>
            <View style={{ alignItems: "center" }}>
                <Text style={{ fontSize: 17, fontWeight: "bold", marginTop: 12, color: "#041E42"}}>
                    Sign Up to your Account
                </Text>
            </View>

            <View style={{ marginTop: 50 }}>
                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, backgroundColor: '#D0D0D0', paddingVertical: 5, borderRadius: 5}}>
                    <Ionicons name="ios-person" size={24} color="gray" style={{ marginLeft: 8 }} />
                    <TextInput value={name} onChangeText={(text) => setName(text)} style={{ color: "gray", marginVertical: 10, width: 300, fontSize: 18 }} placeholder="Enter Your Name" />
                </View>
            </View>
            <View style={{ marginTop: 10 }}>
                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, backgroundColor: '#D0D0D0', paddingVertical: 5, borderRadius: 5, marginTop: 30 }}>
                    <MaterialIcons style={{ marginLeft: 8 }} name="email" size={24} color="gray" />
                    <TextInput value={email} onChangeText={(text) => setEmail(text)} style={{ color: "gray", marginVertical: 10,  width: 300, fontSize: 18 }} placeholder="Enter your Email" />
                </View>
            </View>
            <View style={{ marginTop: 10 }}>
                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, backgroundColor: '#D0D0D0', paddingVertical: 5, borderRadius: 5, marginTop: 30 }}>
                    <AntDesign name="lock1" size={24} color="gray" style={{ marginLeft: 8}} />   
                    <TextInput value={password} onChangeText={(text) => setPassword(text)} secureTextEntry={true} style={{ color: "gray", marginVertical: 10,  width: 300, fontSize: 18 }} placeholder="Enter your Password" />
                </View>
            </View>

            <View style={{ marginTop: 50}} />

            <Pressable onPress={handleRegister} style={{ width: 200, backgroundColor: "#FEBE10", borderRadius: 6, marginLeft: "auto", marginRight: "auto",  padding: 15 }}>
                <Text style={{
                    textAlign: "center",
                    color: "white",
                    fontSize: 16,
                    fontWeight: "bold",
                }}>
                    Register
                </Text>
            </Pressable>

            <Pressable onPress={() => navigation.goBack()} style={{ marginTop: 15 }}>
                <Text style={{ textAlign: 'center', color:'gray', fontSize: 16 }}>Already have an account? Sign In</Text>
            </Pressable>
        </KeyboardAvoidingView>
    </SafeAreaView>
)

api/index.js #

app.post("/register", async(req,res) => {
    try{
        const { name, email, password } = req.body
        const existingUser = await User.findOne({email})

        if(existingUser){
            res.status(400).json({ message: "Email has been used" })
        }

        const newUser = new User({ name, email, password })

        newUser.verificationToken = crypto.randomBytes(20).toString("hex")

        await newUser.save()

       
    } catch(error){
        console.log("Error registering user: ", error)
        res.status(500).json({ message: "Registration failed" })
    }
})

问题原因 #

后端接口在用户数据成功保存到MongoDB后，没有向客户端返回任何响应。axios的请求会一直处于等待状态，永远无法进入then回调，因此前端无法打印response，也不会触发注册成功的提示框。

另外，现有代码中if(existingUser)分支没有添加return，即使返回了400响应，后续代码仍会继续执行，可能引发不必要的逻辑问题。

修复方案 #

1. 完善后端响应逻辑 #

在await newUser.save()之后添加成功响应，并给existingUser分支加上return：

app.post("/register", async(req,res) => {
    try{
        const { name, email, password } = req.body
        const existingUser = await User.findOne({email})

        if(existingUser){
            // 添加return避免后续代码执行
            return res.status(400).json({ message: "Email has been used" })
        }

        const newUser = new User({ name, email, password })
        newUser.verificationToken = crypto.randomBytes(20).toString("hex")
        await newUser.save()

        // 返回成功响应
        return res.status(201).json({ 
            message: "Registration successful",
            user: { id: newUser._id, name: newUser.name, email: newUser.email }
        })
    } catch(error){
        console.log("Error registering user: ", error)
        res.status(500).json({ message: "Registration failed" })
    }
})

2. 优化前端错误排查 #

在前端catch回调中打印更详细的错误信息，方便定位问题：

.catch((error) => {
    Alert.alert(
    "Registration Error",
    error.response?.data?.message || "An error occurred while registering"
    );
    console.log("registration failed", error.response?.data || error.message);
});

内容的提问来源于stack exchange，提问作者Dom