从Firebase中获取数据后，无法呈现react-native Component

Question

我能够从Firebase API提取数据。我可以将状态设置为接收到的数据（可以在控制台中看到）。但是当我无法渲染Component时（将道具作为获取的数据传递）。这是我的代码：

mobile

我希望HomeMeals组件将在调用renderItems（）函数时从获取的数据中以特定名称逐一呈现。但是我什么也没得到。

有什么建议吗？

Answer 1

这里有几点。

1. 执行更多调试（日志）。

    const items = this.state.data;
    const arr = Object.values(items);
    console.log("items and arr", items, arr, this.state);

您从上面的日志中看到什么值？那应该给你一个提示。

1. 下面的这个（renderItems）不起作用，因为它不返回要渲染的元素（或任何东西）（如您尝试的那样）：

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

您想要的是来自renderItems函数的返回元素（元素数组），如下所示：

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

您会注意到两件事：（1）我添加了 return 关键字以返回arr.map返回的内容。 （2）使用arr.map和arr.forEach。尝试自己找出原因；为什么arr.map起作用而arr.forEach不起作用