如何在 Material-UI 中展平状态数组？

Question

我使用 Material-UI 作为电子商务应用程序的前端。

我有一个空的购物车状态数组，它将采用稍后将被解析的“字符串化对象”。 select 组件上的每个 handleChange() 都应该将一个对象（字符串化对象）添加到购物车数组中。

handleChange() 将对象嵌套在自身内部，即 [ob1,[obj2, [obj3, [etc[etc]]]]] - 但我需要 [obj1, obj2, obj3, etc] 代替...

代码 -

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import Icon from '@material-ui/core/Icon';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import soda from "./soda.jpg";
import * as firebase from 'firebase';



const useStyles = makeStyles(theme=>({
  card: {
    maxWidth: 345,
    marginTop: 170,
    marginLeft: 70,
  },
  media: {
    height: 0,
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
}));

export default function MediaCard() {

  const classes = useStyles();
  const [age, setAge] = React.useState('');
  let [cart, setCart]= React.useState([]);
  const inputLabel = React.useRef(null);
  const [labelWidth, setLabelWidth] = React.useState(0);
    React.useEffect(() => {

      }, []);


 const handleChange = event =>{
           Array.prototype.flat(cart)
           setCart([cart].concat(event.target.value));
           console.log(cart);
         };



 let item = {
     itemDescription:"CBD FLOWER",
     itemName: "CBD",
     increments: {
         gram: {
             price: 10,
             weight: 1,
             name: "CBD",
         },
         eighth: {
             price: 30,
             weight: 3.5,
             name: "CBD",
         },
         quarter: {
             price: 70,
             weight: 7,
             name: "CBD",
         },
         half: {
             price: 140,
             weight: 14,
             name: "CBD",
         },
         ounce: {
             price: 300,
             weight: 28,
             name: "CBD",
         },

     }

 };



  let stringified = JSON.stringify(item.increments.gram);







  /*let getDiv = document.getElementById('testo');
      let getInput = getDiv.getElementsByTagName('input');
      for (let i = 0, n = getInput.length; i < n; i = i+1){
          console.log(getInput[i].value);
   }*/




  return (



    <Card className={classes.card}>
      <CardActionArea>
        <CardMedia
          component="img"
          alt={item.itemName}
          height="500"
          image={soda}
          src={soda}
          title="CBD SODA"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {item.itemName}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            A refreshing drink filled w/ 28.8% CBD
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
      <div id="testo">
        <FormControl className={classes.formControl}>
        <InputLabel id="demo">Choose</InputLabel>
        <Select
          labelId="demo"
          id="selectedItem"
          value={age}
          onChange={handleChange}
          displayEmpty
          className={classes.selectEmpty}
        >
          <MenuItem value={JSON.stringify(item.increments.gram)}>10</MenuItem>
          <MenuItem value={JSON.stringify(item.increments.eighth)}>30</MenuItem>
          <MenuItem value={JSON.stringify(item.increments.quarter)}>90</MenuItem>
          <MenuItem value={JSON.stringify(item.increments.half)}>140</MenuItem>
          <MenuItem value={JSON.stringify(item.increments.ounce)}>300</MenuItem>
        </Select>
        <FormHelperText>Quantity + Price</FormHelperText>
      </FormControl>
      <div id="seperator">
      <Button variant="outlined" color="primary">
          Add To Cart
      </Button>
      </div>
      </div>

      </CardActions>


    </Card>


    );

}

之后我试图展平阵列，但什么也没有。 我也试过 Array.prototype.push()，请帮忙，哈哈

Answer 1

你需要的是Array.prototype.flat()吗？ 第一个参数是展平的深度。

 var arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]; var flatarr = arr.flat(Infinity); console.log(flatarr);