Help,

I am new in react native. I try to create a simple searching food restaurant with yelp. Unfortunetly, i got error **

"searchApi is not a function. (in 'searchApi(term)', 'searchApi' is "")

**

Below my code.

useResults.js

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

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

    const searchApi = async (searchTerm) => {        
        console.log("hi there");
        try {
            const response = await yelp.get('/search', {
                params: {
                    limit: 50,
                    term: searchTerm,
                    location: 'san jose'

                }
            });
            setErrorMessage(null);
            setResult(response.data.businesses);
        } catch (err) {
            setErrorMessage('Something Went Wrong');
        }
    };
    
    /*
    useEffect(() => {}); //Run the arrow function everytime the component is rendered    
    useEffect(() => {}, []); // Run the arrow function only when the component is first rendered
    useEffect(() => {}, [value]); // Run the arrow function only when the component is first rendered, and when the value is changes
    */

    useEffect(() => {
        searchApi('pasta');        
    }, []);
    
    return [searchApi, result, errorMessage];
};

SearchScreen.js

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import ResultList from '../components/ResultList';
import SearchBar from '../components/SearchBar';
import useResults from '../hooks/useResults';


const SearchScreen = () => {
    const [term, setTerm] = useState('');
    const [searchApi, result, errorMessage] = useResults();
    console.log(result);
    
    return (
        <View>
            <SearchBar 
                term={term} 
                onTermChange={setTerm} 
                onTermSubmit={() => searchApi(term)}
            />            
            <View>{errorMessage ? <Text>{errorMessage}</Text> : null}</View>
            <Text>We have found {result.length} results</Text>      
            <ResultList title="Cost Effective" />
            <ResultList title="Bit Pricier" />            
            <ResultList title="Big Spender"/>
        </View>
    );
};

const styles = StyleSheet.create({
    
});

export default SearchScreen;

edit : SearchBar.js

import React from 'react';
import { View, Text, StyleSheet, TextInput } from 'react-native';
import { Feather } from '@expo/vector-icons';


const SearchBar = ({ term, onTermChange, onTermSubmit }) => {
    return (
        <View style={styles.backgroundStyle}>
            <Feather style={styles.iconStyle} name="search" size={30} color="black" />
            <TextInput style={styles.inputStyle} 
                autoCapitalize="none"
                autoCorrect={false}
                placeholder="Search" 
                value={term}
                onChangeText={onTermChange}
                onEndEditing={onTermSubmit}
            />

        </View>
    )
};

const styles = StyleSheet.create({
    backgroundStyle: {
        marginTop: 10,
        backgroundColor: '#F0EEEE',
        height: 50,
        borderRadius: 5,
        marginHorizontal: 15,
        flexDirection: 'row'
        
    },
    inputStyle: {        
        flex: 1,
        fontSize: 18,
        marginHorizontal: 10
    },
    iconStyle: {
        fontSize: 35,
        alignSelf: 'center'
    }
});


export default SearchBar;

When i type in search bar and hit done button I got the error above.

Seem in useResults.js file this : return [searchApi, result, errorMessage]; is not properly return the function. But the result and errorMessage return successful.

and in this file : SearchScreen.js the error line is shown in here : onTermSubmit={() => searchApi(term)}

How to fix this ?

Thank You

CodePudding user response：

Try adding a callback to onChangeText.

        <TextInput style={styles.inputStyle} 
            autoCapitalize="none"
            autoCorrect={false}
            placeholder="Search" 
            value={term}
            onChangeText={() => onTermChange()} // Add fat arrow function here
            onEndEditing={onTermSubmit}
        />

CodePudding user response：

I reload the bundle and the error is gone.