React Native API fetch error Request failed with status code 400

Question

I am trying to load data when a React Native but I am getting an error stating:

- 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

Here is my code:

getting api data:

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];
}

Here is the screen where I am loading everything

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>
        )}

I don't understand what that is, am I retrieving that data incorrectly?

Answer 1

I've found the solution. I was calling the API incorrectly. Turns out there was a required param I needed to add to my code when I call the data from the API. Here is my updated code:

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];
}