Объекты недопустимы как дочерние элементы React (найдено: объект с ключами ..)

Question

Я пытаюсь создать базовое c приложение, в котором я выбираю несколько ресторанов из yelp api.

Я получаю сообщение об ошибке ниже на iOS и не могу ее исправить.

Объекты недопустимы в качестве дочерних элементов React (найдено: объект с ключами {id, псевдоним, имя, image_url, is_closed, url, review_count, категории, рейтинг, координаты, транзакции, цена, местоположение, телефон, дисплей_фон, расстояние}). Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив.

Когда я удаляю часть results={filterResultsByPrice('$')} из <ResultsList>, приложение снова работает.

Был бы признателен много, если кто-то может помочь.

Это мой главный экран:

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

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

    const filterResultsByPrice = (price) => {
        return results.filter( result => {
            return result.price === price;
        });

    };

    return (
        <View>
            <SearchBar 
            term={term} 
            onTermChange={(newTerm)=> setTerm(newTerm)} 
            onTermSubmit={searchApi}
            />
        {errorMessage ? <Text>{errorMessage}</Text> : null }
        <Text>We have found {results.length} results</Text>


        <ResultsList results={filterResultsByPrice('$')} title="Cost Effective"/>
        <ResultsList results={filterResultsByPrice('$$')} title="Bit Pricier"/>
        <ResultsList results={filterResultsByPrice('$$$')}  title="Big Spender"/>

        </View>

    );


};

const styles = StyleSheet.create({});

export default SearchScreen;

Это компонент, который я хочу разместить на экране:

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

const ResultsList = ({ title, results }) => {
return (
 <View>
  <Text style={styles.title}> {title}</Text>
  <Text> Results: {results.length} </Text>
 </View>
 );
};

const styles  = StyleSheet.create({
 title:
 {
     fontSize: 18,
     fontWeight: 'bold'
 }

});

export default ResultsList;

И это мое использованиеРезультаты:

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

export default () => {

    const [results, setResults] = useState([]); //default is empty array
    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'
            }
        });
        setResults(response.data.businesses);
    }  catch (err) {
        setErrorMessage('Something went wrong.');
    }
    };

    useEffect(()=> {
        searchApi('pasta');

    }, []);

    return [searchApi, results, errorMessage];

};

Answer 1

Вам нужно обновить компонент ResultsList до этого, надеюсь, он навсегда исправит вашу проблему:

import React from "react";
import { View, Text, StyleSheet } from "react-native";

const ResultsList = ({ title, results }) => {
  return (
    <View>
      <Text style={styles.title}> {title}</Text>
      {results.map(result => (
        <Text>Results: {result.length}</Text>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  title: {
    fontSize: 18,
    fontWeight: "bold"
  }
});

export default ResultsList;