ReactJS 和 Firebase：如何从 Firebase 数据库动态填充主页

Question

我是 ReactJS 的超级新手。我在 Firebase 上部署了一个课程项目（我没有针对不同的分辨率进行动态缩放，现在在移动设备上效果更好）：https://clean-kitchen.web.app/

目前，食谱按以下方式进行硬编码：

class Home extends Component {
  constructor(props) {
      super(props);
      this.state = {};
  }
  componentDidMount() {}
  componentWillUnmount() {}

  render() {
      return <>
          <GridCategory />
          <Paper elevation={0} square style={{ marginTop: "8px", marginBottom: "8px", padding: "8px"}}>
          <HeaderSuggestion title="Popular" icon="fire.png" />
          <GridSuggestion recipe="pasta alla carbonara" img="carbonara.jpg" />
          </Paper>
          <Paper elevation={0} square style={{ marginTop: "8px", marginBottom: "8px", padding: "8px"}}>
          <HeaderSuggestion title="Editor's Choice" icon="choice.png" />
          <GridSuggestion recipe="Cheesecake" img="cheesecake.jpg" />
          </Paper>
      </>
  }
}

我的目标是从实时数据库中获取当前食谱并动态创建页面。 Firebase 上的数据库设计如下：

我正在尝试通过以下方式获取数据库节点，但我无法使用 forEach 方法对此进行迭代。

var recipes = fire.database().ref("node_recipes/recipes");

如何正确迭代此变量并将配方名称和图像 URL 传递到“GridSuggestion”？谢谢！

Answer 1

要迭代一个数组并为该数组的每个元素返回一个 JSX 元素，请使用 map。你的出租车做这样的事情：

{recipes.map(recipe => (
    <GridSuggestion key={recipe.id} recipe={recipe.title} img={recipe.overviewImg} />
))}

如果您想在循环中包含更多内容，例如您的 Paper 和 HeaderSuggestion 组件，只需在地图的返回中添加 then 即可