React Native API 获取错误请求失败，状态代码为 400

Question

我正在尝试在 React Native 时加载数据，但我收到一条错误消息：

- node_modules/axios/lib/core/createError.js:15:17 in createError
- node_modules/axios/lib/core/settle.js:16:9 in settle
- node_modules/axios/lib/adapters/xhr.js:50:6 in handleLoad
- node_modules/event-target-shim/dist/event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:566:23 in setReadyState
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:388:25 in __didCompleteResponse
- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:190:12 in emit
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

这是我的代码：

正在获取 api 数据：

import { useEffect, useState } from 'react';
import zomato from '../api/zomato';

export default () => {
    const [results, setResults] = useState([]);
    const [errorMessage, setErrorMessage] = useState('');

    const searchAPI = async () => {
        try {
            const response = await zomato.get(`/collections`);
            setResults(response.data);
            console.log(response.data);
        } catch(err) {
            setErrorMessage('Something went wrong, man');
        }
    }
    return [searchAPI, results, errorMessage];
}

这是我正在加载所有内容的屏幕

const HomeScrn = () => {
    const [searchAPI, results, errorMessage] = useResults();

    useEffect(() => {
        searchAPI()
    }, [])

    return (
        <View>
            <View style={styles.header}>

                <Image source={Logo} style={{resizeMode:'stretch', width:50, height:50, alignSelf:'center', marginTop:30}}/>
                    <Icon
                        raised
                        name='location'
                        type='octicon'
                        color='#f50'
                        onPress={() => this.setState({ isModalVisible: !this.state.isModalVisible})}
                        containerStyle={{ alignSelf:'flex-end', marginRight:20, marginTop:-60 }}/>
            </View>
                <FlatList 
                    style={{marginBottom: 160, marginTop:-10}}
                    showsVerticalScrollIndicator={false}
                    keyExtractor={item => item.id}
                    data={results}
                    renderItem={({ item }) => 
                    <TouchableHighlight onPress={()=> console.log('pressed!')}>
                        <View style={styles.container}>
                            <ImageBackground style={styles.imageURL} resizeMode="cover" source={{uri: item.collection.image_url}}>
                                <Text style={styles.collTitle}>{item.collection.title} </Text>
                            </ImageBackground>
                        </View>
                    </TouchableHighlight>}/>
        </View>
        )}

我不明白那是什么，我是否错误地检索了该数据？

Answer 1

我找到了解决办法。我错误地调用了 API。事实证明，当我从 API 调用数据时，我需要将 param 添加到我的代码中。这是我更新的代码：

import { useEffect, useState } from 'react';
import zomato from '../api/zomato';

export default () => {
    const [results, setResults] = useState([]);
    const [errorMessage, setErrorMessage] = useState();

    const searchAPI = async (location) => {
        try {
            const response = await zomato.get(`/collections`, {
                params: {
                    'city_id': `${location}`
                }
            });
            setResults(response);
            console.log(response);
        } catch(err) {
            setErrorMessage(err);
            console.log(err)
        }
    }

    return [searchAPI, results, errorMessage];
}

React Native API 获取错误请求失败，状态代码为 400

React Native API fetch error Request failed with status code 400

react-native

use-effect

zomato-api