Фильтрация проблем в React Native

Question

Вот код, который я написал для фильтрации некоторых элементов:

const SearchScreen = () => {
    const [term, setTerm] = useState('');
    const [results, setResults] = useState('');
    const [errorMessage, setErrorMessage] = useState('');


const searchApi = async () => {
    try {
        const response = await yelp.get('/search', {
            params: {
                limit: 30,
                term,
                location: 'san jose'
            }
        });

        setResults(response.data.businesses);


    } catch (e) {
        setErrorMessage('Ooops!!! Something went wrong.')
    }
};

const filterResultsByPrice = price => {
    // price === '$' || '$$' || '$$$'
    return results.filter(result => {
      return result.price === price;
    });
  };


return (
    <View>
        <SearchBar term={term} onTermChange={setTerm} onTermSubmit={searchApi} />
        {errorMessage ? <Text style={styles.errorText}>{errorMessage}</Text> : null}
        <Text>Total {results.length} results are found.</Text>


        <ResultsList results={filterResultsByPrice('$')} title="Cost Effective" />
        <ResultsList results={filterResultsByPrice('$$')} title="Bit Pricer" />
        <ResultsList results={filterResultsByPrice('$$$')} title="Ambanis Only" />

    </View>
);

};

Я использую этот код, и снова и снова я получаю иногда, что он работает и иногда он выдает эту ошибку на терминал:

results.filter is not a function. (In 'results.filter(function (result) {
        return result.price === price;
      })', 'results.filter' is undefined)

Пожалуйста, помогите мне решить эту проблему. я не могу найти причину этой проблемы root 1009 *

Answer 1

Я думаю, что проблема в том, что вы инициализируете переменную результатов как пустую строку, поэтому, когда вы вызываете filter () для строки, вы получаете ошибку. Попробуйте изменить инициализацию на пустой массив:

const [results, setResults] = useState([]);