Блог

Я супер-новичок в 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»? Спасибо!

Для итерации массива и возврата элемента JSX для каждого элемента этого используемого массива map . Вы можете сделать что-то вроде этого:

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

Если вы хотите включить в цикл больше содержимого, например, ваши Paper HeaderSuggestion компоненты и, просто добавьте then в возврат карты