反应本机JSON解析错误无法识别的令牌

Question

我正面临以下JSON解析错误问题：无法识别的令牌“ <”

错误消息如下。

JSON解析错误：

Unrecognized token '<'

parse
    [native code]:0
tryCallOne
    c:\wamp64\www\tutorials\LoginTest\node_modules\promise\setimmediate\core.js:37:14
<unknown>
    c:\wamp64\www\tutorials\LoginTest\node_modules\promise\setimmediate\core.js:123:25
_callTimer
    c:\wamp64\www\tutorials\LoginTest\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:152:14
_callImmediatesPass
    c:\wamp64\www\tutorials\LoginTest\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:200:17
callImmediates
    c:\wamp64\www\tutorials\LoginTest\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:464:30
callImmediates
    [native code]:0
__callImmediates
    c:\wamp64\www\tutorials\LoginTest\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:320:6
<unknown>
    c:\wamp64\www\tutorials\LoginTest\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6
__guard
    c:\wamp64\www\tutorials\LoginTest\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:297:10
flushedQueue
    c:\wamp64\www\tutorials\LoginTest\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:17
flushedQueue
    [native code]:0
callFunctionReturnFlushedQueue
    [native code]:0

我想从此链接https://www.youtube.com/watch?v=Qt2ohl-hyFw复制代码，因为我想创建一个可行的登录页面并查看其工作方式。但是，我不能。

我试图从response.json（）更改为response.text（），但仍然无法解决问题。

import React from 'react';
import { StyleSheet, Text, View, TextInput, KeyboardAvoidingView, TouchableOpacity } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import { StackNavigator } from 'react-navigation';

export default class Login extends React.Component {

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

    componentDidMount() {
        this._loadInitialState().done();
    }

    _loadInitialState = async () => {
        var value = await AsyncStorage.getItem('user');
        if (value !== null) {
            this.props.navigation.navigate('Profile');
        }
    }

    render() {
        return (
            <KeyboardAvoidingView behavior='padding' style={styles.wrapper}>
                <View style={styles.container}>
                    <Text style={styles.header}>- LOGIN -</Text>

                    <TextInput style={styles.textInput} placeholder='Username' 
                        onChangeText={ (username) => this.setState({username})}
                        underlineColorAndroid='transparent'
                    />

                    <TextInput style={styles.textInput} placeholder='Password' 
                        onChangeText={ (password) => this.setState({password})}
                        underlineColorAndroid='transparent'
                        secureTextEntry={true}
                    />

                    <TouchableOpacity
                        style={styles.btn}
                        onPress={this.login}>
                        <Text>Log In</Text>
                    </TouchableOpacity>

                </View>

            </KeyboardAvoidingView>
        );

    }

    login = () => {

        alert(this.state.username);
        fetch('http://192.168.1.142:80/users', {
            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((res) => {

            alert(res.message);

            if (res.success === true) {
                AsyncStorage.setItem('user', res.user);
                this.props.navigation.navigate('Profile');
            }
            else {
                alert(res.message)
            }
        })
        .done();
    };
}