应用程序通过单击按钮不断获取 Firebase 数据 [ReactJs]已关闭

问题描述

我有一个在线餐厅应用，可以从 firebase 获取菜单项。每次我向购物车添加东西时它都会获取，这会使菜单项消失然后重新出现一秒钟。每次单击后，它还会滚动回页面顶部。如何防止这种重新加载？ e.preventDefault() 不起作用。是因为数据从孩子传递给父母吗？我不确定。

//imports

import React,{ useState,useEffect } from "react";
const Menue = (props) => {

  
  const [cartLength,setCartLength] = useState(0);

  const [indischeGerichte,setIndischeGerichte] = useState([])

  useEffect(() => {
    fire.firestore().collection("Indische Gerichte")
    .orderBy("id","asc")
    .get()
    .then(snapshot => {
      var ind = []
      snapshot.forEach(doc => {
        ind.push(doc.data())
      })
      setIndischeGerichte(ind)
    }).catch(error => {
      console.log(error)
    });
  },[])
  function addToCart(e,item) {
    e.preventDefault();
    var updatedCart = { ...props.cart };
    if (!updatedCart[item.title]) {
      updatedCart[item.title] = [1,item.price];
    } else {
      updatedCart[item.title][0]++;
    }
    setCartLength(cartLength + 1);
    props.setTheCart(updatedCart,cartLength);
  }
  return (
    <div>
      <Typography variant="h3" component="h2" gutterBottom>
        Speisekarte
      </Typography>
      <div id="ind">
        <Typography variant="h4">Indian Foods:</Typography>
        {indischeGerichte.map((indFood,idx) => {
          return (
            <div key={idx}>
              <Card className="foodCard">
                <Typography variant="h4">{indFood.title}</Typography>
                <Button
                  variant="contained"
                  color="secondary"
                  onClick={(e) => addToCart(e,indFood)}
                >
                  1x In den Einkaufswagen
                </Button>
              </Card>
            </div>
          );
        })}
      </div>
    </div>
  );
};
export default Menue;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）