Я использую Material-UI в качестве внешнего интерфейса для своего приложения электронной коммерции.
У меня есть пустой массив состояния корзины, который будет принимать «строковые объекты», которые впоследствии будут проанализированы. Каждый handleChange () в компоненте select должен добавлять объект (stringified object) в массив cart.
HandleChange () вкладывает объекты внутри себя, т. Е. [Ob1, [obj2, [obj3, [etc [etc]]]]] - но мне нужно [obj1, obj2, obj3 и т. Д.] Вместо этого ...
Код -
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 (), пожалуйста, помогите, лол
1 ответ
Это Array.prototype.flat ( ) что вам нужно? Первый параметр - это глубина сплющивания.
var arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
var flatarr = arr.flat(Infinity);
console.log(flatarr);
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.