Question

我正在以react -native方式进行项目，但是在执行项目时出现以下错误：

[Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected identifier "An"]

Stack trace:
  [native code]:null in parse
  node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
  node_modules/promise/setimmediate/core.js:123:25 in setImmediate$argument_0
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:194:17 in _callImmediatesPass
  node_modules/react-native/Libraries/Core/Timers/JSTimers.js:458:30 in callImmediates
  [native code]:null in callImmediates
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:407:6 in __callImmediates
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:6 in __guard$argument_0
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:142:17 in __guard$argument_0
  [native code]:null in flushedQueue
  [native code]:null in invokeCallbackAndReturnFlushedQueue
  ...

我的代码如下：

App.js

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import MealsScreen from './src/screens/Meals';
import Modal from './src/screens/Modal';

const AppNavigation = createStackNavigator({
  Meals: {
    screen: MealsScreen
  }
}, {
  initialRouteName: 'Meals'
});

const RootStack = createStackNavigator( {
  Main: AppNavigation,
  Modal: Modal,
}, {
  mode: 'modal',
  headerMode: 'none',
});

export default createAppContainer( RootStack );

Meals.js

import React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import ListItem from '../components/ListItem';
import UseFetch from '../hooks/useFetch';

const Meals = ({navigation}) => {
    const { loading, dato: meals } = UseFetch('https://serverless.mgyavega.now.sh/api/meals');

    return(
        <View style =  { styles.container }>
            { loading ? <Text>Cargando por favor espere...</Text> :
                <FlatList
                    style = { styles.list }
                    data = { meals }
                    keyExtractor = { x => x._id }
                    renderItem = { ({ item }) =>
                        <ListItem
                            onPress = { () => navigation.navigate('Modal', { id: item._id })}
                            name = { item.name }
                        />
                    }
                />
            }
        </View>
    )
}

Meals.navigationOptions = ({
    title: 'Comidas Disponibles',
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'flex-start',
        justifyContent: 'flex-start'
    },
    list: {
        alignSelf: 'stretch'
    }
});

export default Meals;

ListItem.js

import React from 'react';
import {  TouchableOpacity, Text, StyleSheet } from 'react-native';

export default ({ name, onPress }) => {

    return (
        <TouchableOpacity onPress = { onPress } style={ styles.container }>
            <Text style = { styles.text }> {name} </Text>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: 15,
        height: 60,
        justifyContent: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#eee'
    },
    text: {
        fontSize: 16
    }
});

UseFetch.js

import React, { useState, useEffect} from 'react';

const UseFetch = ( url ) => {
    const [ loading, setLoading ] = useState(true);
    const [ dato, setDato] = useState([]); // Este traer al incio un arreglo vacio

    const fetchData = async () => {
        const response = await fetch(url);
        const data = await response.json();
        setDato(data);
        setLoading(false);
    }

    useEffect( () => {
        fetchData();
    }, []);

    return { loading, dato }
}

export default UseFetch;

Modal.js

import React from 'react';
import {  View, Text, } from 'react-native';
import UseFetch from '../hooks/useFetch';

export default ({ navigation }) => {

    const id = navigation.getParam('_id');
    const { loading, dato } = UseFetch(`https://serverless.mgyavega.now.sh/api/meals/${id}`);

    console.log( dato );

    return (

        loading ? <Text>Cargando </Text> :
            <View>
                <Text>  </Text>
                <Text> </Text>
            </View>

    )
}

我无法在Modal中获得盘子的_id，在创建console.log时，它指示该值未定义，但是在使用console.log modal模式的数据库进行console.log时（数据）;如果您向我显示数据记录，但它首先是空的，然后记录中的数据又出去了两次，但是在执行过程中，出现了我指示的错误。

我非常感谢您能为我提供的合作。

谢谢。

玛丽

[未处理的承诺拒绝：SyntaxError：JSON解析错误：意外的标识符“ An”]

0 个答案: