渲染选定的食物项目 ReactJs (Material-UI)

如何解决渲染选定的食物项目 ReactJs (Material-UI)

我想呈现列表中的项目。当一个按钮被按下时，它会将一个食品（饮料）添加到名为购物车的列表中。我想在按下按钮时在材质 ui 对话框中呈现此列表。它是空白的。我做错了什么？

        import { Button,IconButton,List,ListItem,Typography } from "@material-ui/core"
import Order from './Order'
import Dialog from '@material-ui/core/Dialog';
import CloseIcon from '@material-ui/icons/Close';

import Appbar from '@material-ui/core/Appbar'
import Toolbar from '@material-ui/core/Toolbar'

import DialogActions from '@material-ui/core/DialogActions'


import React,{useState} from 'react'
const Menue = () => {
    
    const cart = []
    const [cartOpen,setCartOpen] = useState(false)

    function toggleOrder(){
        alert(cart)
        setCartOpen(! cartOpen)
    }
    function addToCart(e){
        cart.push(e.target.innerText)
        console.log(cart)
    }
    return(
        <div>
            <Typography variant="h2" component="h2" gutterBottom>
                Speisekarte
            </Typography>
            <Typography>Getränke:</Typography>
            <Button name = "milch" onClick = {addToCart}>Milch</Button>
            <Button name = "cola" onClick = {addToCart}>Cola</Button>
            <Button name = "lassi" onClick = {addToCart}>Lassi</Button>
            <Button name = "sprite" onClick = {addToCart}>Sprite</Button>
            <Button onClick = {toggleOrder}>Order</Button>
            <Dialog fullScreen open = {cartOpen} onClose = {toggleOrder}>
                {
                    cart.map(item => {
                        return(
                            <h3>{item}</h3>
                        );
                    })
                }
            </Dialog>
        </div>
    )
}
export default Menue

解决方法

这是你需要做的：

const [cart,setCart]=useState([]);
function addToCart(e){
        setCart([...cart,e.target.innerText]);
        
    }

你不能像你试图做的那样在 react 中操作 const 变量。它不会改变cart 的值，事实上，在你创建一个变量 const（你这样做的方式）之后，你永远无法操作那个变量，你在开始时赋予它的任何值都会存在。

,

购物车必须是一个状态。将购物车更改为 useState() 并相应地更改您的代码以适应它。

,

您的购物车需要useState。

const [cart,setCard] = useState([])

然后像这样更新您的 addToCart 函数：

function addToCard(e) {
  setCart(cart => [...cart,e.target.innerText])
}