Question

我正在尝试学习React Native，并且在使用phpMyAdmin / SQL构建登录功能后，JSON文件出现问题。这是我的数据库，代码和日志：
documentation
enter image description here
enter image description here
enter image description here
这是我的登录屏幕代码：

import React, { Component } from 'react'
import {
StyleSheet, Text, View, Image,
TouchableWithoutFeedback, StatusBar,
TextInput, SafeAreaView, Keyboard, TouchableOpacity,
KeyboardAvoidingView, Button, ToolbarAndroid} from 'react-native'

constructor(props) {
    super(props);
    this.state = {
      password: "",
      username: "",

    };
  }
render() {
    return (
        <SafeAreaView style={styles.container}>
            <StatusBar barStyle="light-content" backgroundColor= "#1c313a" />
            <KeyboardAvoidingView behavior='padding' style={styles.container} enabled>
                <TouchableWithoutFeedback style={styles.container} 
                        onPress={Keyboard.dismiss}>

                    <View style={styles.logoContainer}>
                        <View style={styles.logoContainer}>
                            <Image style={styles.logo}
                                source={{uri:'https://cdn0.iconfinder.com/data/icons/BrushedMetalIcons_meBaze/512/Apple-03.png'}}>
                            </Image>
                            <Text style={styles.title}>Login</Text>
                        </View>
                        <View style={styles.infoContainer}>
                            <TextInput style={styles.input}
                                value= {this.state.username}
                                onChangeText={username => this.setState({ username })}
                                placeholder="Enter username/email"
                                placeholderTextColor='rgba(255,255,255,0.8)'
                                keyboardType='email-address'
                                returnKeyType='next'
                                autoCorrect={false}
                                onSubmitEditing={()=> this.refs.txtPassword.focus()}
                            />
                            <TextInput style={styles.input} 
                                value= {this.state.password}
                                onChangeText={password => this.setState({ password })}
                                placeholder="Enter password"
                                placeholderTextColor='rgba(255,255,255,0.8)'
                                returnKeyType='go'
                                secureTextEntry
                                autoCorrect={false}
                                ref={"txtPassword"}
                            />
                            <TouchableOpacity style={styles.buttonContainer} onPress={()=>this.login()} >
                                <Text style={styles.buttonText}>SIGN IN</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.buttonContainer} onPress={()=>this.props.navigation.navigate('Register')} >
                                <Text style={styles.buttonText}>SIGN UP</Text>
                            </TouchableOpacity>
                        </View>
                    </View>

                </TouchableWithoutFeedback>
            </KeyboardAvoidingView>
        </SafeAreaView>

    )
}

这是我使用POST方法获取的登录功能：

login(){


    fetch('http://192.168.1.12:8080/webservice/login.php', {
        method: 'POST',
        headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',},
        body: JSON.stringify({
        username: this.state.username,
        password: this.state.password}),})
    .then((response)=> response.json())
    .then((responseJson)=>{
        if (responseJson == "ok"){
            alert("Successfully Login");
            this.props.navigation.navigate('Home');
        }else {
            alert("Wrong Details");
        }
    })
    .catch((error)=>{
        console.log(error);
    })

}

仅当我将用户名和密码留空时才显示“错误的详细信息”，如果输入有效或无效的用户名和密码则不起作用。我已经为这个问题困了2天。我不知道该怎么解决。我希望你们能帮助我
P / s：如果英语不好，我很抱歉

Answer 1

您对此有何看法？

  isJson = (str) => {
        try {
            JSON.parse(str);
        } catch (e) {
            return false;
        }
        return true;
    }

     fetch('http://192.168.1.12:8080/webservice/login.php', {
            method: 'POST',
            headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',},
            body: JSON.stringify({
            username: this.state.username,
            password: this.state.password})}).then((response)=> {
            if (this.isJson(response._bodyInit)){
                    return response.json()
                } else {
                    return response.text()
                }
        }).then((responseJson)=>{
            if (responseJson == "ok"){
                alert("Successfully Login");
                this.props.navigation.navigate('Home');
            }else {
                alert("Wrong Details");
            }
        })
        .catch((error)=>{
            console.log(error);
        })

SyntaxError：JSON解析错误：无法识别的令牌“ <”反应本地0.57

1 个答案: