Блог

В настоящее время у меня есть объект из базы данных FireBase. Вот так:

Я хочу отобразить эти данные с помощью React, пока у меня есть:

 return (
   <React.Fragment>
      <StyledMain role="main">
        <Layout currentUser={currentUser}>
          <ListCards currentUser={currentUser} />
            {data.map((item, index) => (
              <Card id={Object.keys(item).toString()} key="c" type="chats">
                <CardContent scrollbar={false}>
                  <Grid columns={`${rem(300)} 1fr`} scrollbar={false}>
                    {Object.keys(item).map(function(key, index) {
                      <Text text={item[key]['type'].toString()} />;
                     })}
                  </Grid>
               </CardContent>
             </Card>
           ))}
        </Layout>
     </StyledMain>
   </React.Fragment>
);
  

Имеющий data содержащий объект firebase Widgets.
Моя цель — отобразить, Card где id находится erf4553o459g4 , и Text компонент будет отображать lists
Каков наилучший подход для достижения этой цели? Две map функции кажутся немного ненужными.

Функция для получения данных из FireBase:

 const getSingleRefFunction = (ref, callback) => {
  const dataArray = [];

  ref.once('value', snap => {
    dataArray.push(snap.val());
    callback(dataArray);
  });
};