在反应中打印来自firebase DB的所有数据答案

【问题标题】：Printing all the data from a firebase DB in react在反应中打印来自firebase DB的所有数据
【发布时间】：2017-04-23 16:37:17
【问题描述】：

所以我有一个如下所示的 firebase 数据库：

我想知道即使添加了更多任务，我也可以通过 react 动态打印每个任务在其自己的框中。

【问题讨论】：

标签： javascript reactjs firebase firebase-realtime-database

【解决方案1】：

使用 .map 函数。例如，查看此资源以获取文档。我想这就是你要的：

https://facebook.github.io/react/docs/lists-and-keys.html

下面的示例是一个简单的待办事项列表。我正在从 this.props 中提取“todos”对象，但是可以替换该对象，但是您正在从 firebase 访问返回对象。

export class TodoList extends React.Component {
    render () {
      var {todos, showCompleted, searchText} = this.props;
      var filteredTodos = TodoAPI.filterTodos(todos, showCompleted, searchText);

      var renderTodos = () => {
        if (filteredTodos.length === 0){
          return (
            <p className="container__message">Nothing To Do</p>
          );
        }
        return filteredTodos.map((todo) => {
          return (
            <Todo key={todo.id} {...todo}/>
          )
        });
      };

      return (
        <div>
          {renderTodos()}
        </div>
      )
    }
  };

  export default connect(
    (state) => {
      return state;
    }
  )(TodoList);

在这个例子中，我调用“renderTodos()”，它首先检查是否有任何待办事项，如果有，它使用 javascripts .map 方法遍历所有返回另一个组件的待办事项（单个待办事项 - 每个单独的待办事项是一个组件）——该组件显示每个待办事项。希望对您有所帮助。

【讨论】：

所以看起来地图只是遍历数组中的每个值。如何获取每个值的动态变化数组？
您如何访问您的 Firebase 数据？通常，您会将对象从道具中拉出，其中将包含您的任务及其所有属性...当 firebase 中有新数据时，您从道具中拉出的对象将包含新数据
我实际上遵循了本教程youtu.be/p4XTMvagQ2Q，这是一种获取数据的非常静态的方式。是否有指南或教程可以告诉我如何像您上面所说的那样访问数据？
hmmm 遗憾的是我仍然不完全理解。如果您愿意，我很乐意为您在帮助我时付出的时间付出代价。
为了清楚起见，我编辑了我的答案。还可以查看我的 react todo 项目的 repo here 我绝不是 React 专家，我只是在 React 遇到了类似的挑战，所以我想我可以提供我的经验。希望这会有所帮助！