Как я могу хранить информацию и отображать этот хук в ReactJS? - PullRequest
Новая
       19

Как я могу хранить информацию и отображать этот хук в ReactJS?

0 голосов
/ 10 февраля 2020

Я использую кнопку из другого компонента для доступа к этому Favorites компоненту, но когда я нажимаю кнопку, она ничего не загружает и страница становится пустой. Теперь, если я дважды нажму кнопку, появится информация. 

const Favorites = (props) => {

const [products, setProducts] = useState([]);

useEffect(() =>{

  let productsArray = []
  firebase.database().ref().child('favorites').orderByKey()
  .once('value', snap => {
  snap.forEach(child => {

        if(child.val().user_id === firebase.auth().currentUser.uid){
           firebase.database().ref('products/' + child.val().product_id)
           .once('value')
           .then(snapshot =>{

            const favorite = {
              id:           snapshot.key,
              name:         snapshot.val().name,
              category:     snapshot.val().category,
              description:  snapshot.val().description,
              image:        snapshot.val().image,
              price:        snapshot.val().price,
              stock:        snapshot.val().stock,
            };

            productsArray.push(favorite);
          });
        }
      });
    setProducts(productsArray);
  });
},[]);

return (
 <Fragment>
    <ul>
    { products && products.map((item, index) => {
        return(
          <Grid container justify="center" alignItems="center" key={index}>
              <div className={classes.root}>
                <Paper className={classes.paper}>
                  <Grid container spacing={2}>
                    <Grid item>
                      <ButtonBase className={classes.image}>
                        <img className={classes.img} alt="complex" src={item.image} />
                      </ButtonBase>
                    </Grid>
                    <Grid item xs={12} sm container>
                      <Grid item xs container direction="column" spacing={2}>
                        <Grid item xs>
                          <Typography gutterBottom variant="subtitle1">
                            {item.name}
                          </Typography>
                          <Typography variant="body2" gutterBottom>
                            {"Categoria: " + item.category}
                          </Typography>
                          <Typography variant="body2" color="textSecondary">
                            {item.description}
                          </Typography>
                        </Grid>
                        <Grid item>
                        <Button 
                            onClick={(event) => removeFavorite(event, index)}>
                              <HighlightOff/> Eliminar de Favoritos
                       </Button>
                        </Grid>
                      </Grid>
                      <Grid item>
                          <Typography variant="subtitle1">{"Bs " + item.price + "/ Kg"}</Typography>
                      </Grid>
                    </Grid>
                  </Grid>
                </Paper>
              </div>
          </Grid>
        );
      })
      }
  </ul>
</Fragment>
);
} 
export default Favorites;

Я думаю, что я делаю что-то не так с useEffect(), когда выполняю запрос и сохраняю его с исправлением setProducts(). Я не знаю, что происходит, почему он go пуст, а затем повторно запускает компонент Favorites, если он показывает? Я ценю вашу помощь.

В компоненте приложения у меня есть кнопка «Корзина покупок», которая перенаправляет на «/ shoppingcart», который является компонентом, в котором у меня проблема. 

const MyLink = React.forwardRef((props, ref) => <RouterLink innerRef={ref} 
{...props} />);

function App() {

const [user, setUser] = useState(null);

const onLogout = () => {
  setUser(null);
};

return (
<Router>
  <CssBaseLine/>
      <Header user={user}>

      {user && <Button to="/shoppingcart" component={MyLink} 
       color="inherit"><ShoppingCartSharp /></Button>}

      </Header>
      <Routes/>
</Router>
);
}

export default App;
...