React Native 和 Firebase：如何让 JSX 组件从获取的 Firebase 项目数据库中渲染？

Question

我是React Native和Firebase的新手，这可能很容易，但我无法弄清楚出了什么问题。 我正在尝试：

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

(2) 过滤该数组，以确定每个对象具有特定颜色时(完成)

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

问题 - 在 renderItems() 中 return() 语句上方的控制台.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()中的函数调用。