Невозможно отобразить реагирующий компонент после извлечения данных из firebase - PullRequest
Новая
       10

Невозможно отобразить реагирующий компонент после извлечения данных из firebase

1 голос
/ 23 марта 2019

Я могу получить данные из API Firebase.Я могу установить состояние в полученных данных (я вижу в консоли).Но когда я не могу отрендерить Компонент (передавая реквизиты как извлеченные данные).Вот мой код: 

    class NewMeals extends Component {

      constructor(props){
        super(props);
        this.state= {
          data:''
        }
      }

      async componentDidMount(){
        try{
          const res = await fetch('https://frego-cb5b5.firebaseio.com/recipes.json?auth=api_key');
          if(!res.ok){
            throw Error(res.statusText);
          }
          const json = await res.json();
          this.setState({data:json});
        }catch(err){
          console.log(err);
        }
      }


      renderItems=()=>{

        const items = this.state.data;
        const arr = Object.values(items);

        arr.forEach(i=>{
          return <HomeMeals  name={i.title} time={i.time} serve={i.serve}/>

        })


      }

      render(){
        const {mainView, CardSection, heading, } = styles;

        return( 

            <View style={mainView}>

              <Text style={heading}>New Meals This Week</Text>

              <ScrollView contentContainerStyle ={CardSection} horizontal={true} showsHorizontalScrollIndicator={false}>

                {this.renderItems()}


              </ScrollView>
              </ View>


        );
      }
    }

Я ожидаю, что компоненты HomeMeals будут рендерить по одному с конкретными именами из извлеченных данных при вызове функции renderItems ().Но я ничего не получаю.

Есть предложения?

1 Ответ

3 голосов
/ 23 марта 2019

Пара моментов здесь.

  1. Делайте больше отладки (логи).
    const items = this.state.data;
    const arr = Object.values(items);
    console.log("items and arr", items, arr, this.state);

Какие значения вы видите из журналов выше?Это должно дать вам подсказку.

Этот ниже (renderItems) не работает, так как он не возвращает элементы (или что-нибудь) для визуализации (как вы пытались): 
    renderItems=()=>{
      arr.forEach(i=>{
         return <HomeMeals  name={i.title} time={i.time} serve={i.serve}/>
      })
      ...

Что бы вы хотелиwant это вернуть элементы (массив элементов) из функции renderItems следующим образом: 

    renderItems=()=>{
      return arr.map(i=>{
         return <HomeMeals  name={i.title} time={i.time} serve={i.serve}/>
      })
      ...

Две вещи, которые вы заметите: (1) Я добавил ключевое слово return , чтобы вернуть любое значение.map возвращается.И (2) использование arr.map против arr.forEach.Попробуйте выяснить причину этого самостоятельно;почему arr.map работает, а arr.forEach нет

...