React Native & Firebase：如何让 JSX 组件从获取的 Firebase 项目数据库中呈现？

Question

我是 React Native 和 Firebase 的新手，这可能很容易，但我不知道出了什么问题。我正在尝试：

(1) 从我的 Firebase 数据库中获取项目列表，将 Firebase 返回的 snapshot.val() 转换为数组 (DONE)

(2) 在每个对象具有特定颜色时过滤该数组 (DONE)

(3) 将过滤后的对象数组发送到将 JSX 组件呈现到屏幕上的函数（不工作）

问题 - renderItems() 中 return() 语句上方的 console.log 告诉我，我正在获取需要正确显示的数据，但无论出于何种原因，JSX 组件都没有呈现到屏幕上。我觉得我缺少一些简单的东西，但我就是不知道是什么。请帮忙！

import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import _ from 'lodash';
import firebase from 'firebase';
import Item from './Item';

class ItemList extends Component {

  getItemsByColor(color) {
    const itemsRef = firebase.database().ref('/items/');
      itemsRef.once('value').then((snapshot) => {
        const filteredItems = _.filter(snapshot.val(), item => {
          return item.color === color;
        });
        this.renderItems(filteredItems);
      }, (error) => {
        // The Promise was rejected.
        console.error(error);
      });
    }

  renderItems(filteredItems) {
    filteredItems.map((item) => {
      console.log(item.name);
      return <Item name={item.name} color={item.color} />;
    });
  }

  render() {
  return (
    <ScrollView style={{ backgroundColor: '#333', flex: 1 }}>
      {this.getItemsByColor('blue')}
    </ScrollView>
  );

}

}

export default ItemList;

Answer 1

在renderItems() 内，您将每个<Item/> 返回给map 函数，但之后不会返回函数的结果。尝试像这样包含另一个return：

renderItems(filteredItems) {
  return filteredItems.map((item) => {
    console.log(item.name);
    return <Item name={item.name} color={item.color} />;
  });
}

您可能还需要在getItemsByColor() 中添加更多return 语句，以便将<Item/> 的数组返回给render() 中的函数调用。