en la aplicacion, se require que el usuario suba imagenes y al mismo tiempo le muestro una preview
de la carta que se va a subir, pero al agregar un objeto al array con imagenes este me devuelve que .map no es na funcion, no entiendo por que, les dejo mi codigo
const [nombre, setNombre] = React.useState("");
const [seccion, setSeccion] = React.useState("");
const [precio, setPrecio] = React.useState("");
const [descripcion, setDescripcion] = React.useState("");
const [imagenes, setImagenes] = React.useState([]);
const [preview, setPreview] = React.useState([]);
const [marca, setMarca] = React.useState("");
const [cantidad, setCantidad] = React.useState("");
const [ i, setI ] = React.useState(false)
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false
};
const handleChangeNombre = event => {
const { value } = event.target;
setNombre(value);
};
const handleChangeSeccion = event => {
const { value } = event.target;
setSeccion(value);
};
const handleChangePrecio = event => {
const { value } = event.target;
setPrecio(value);
};
const handleChangeDescripcion = event => {
const { value } = event.target;
setDescripcion(value);
};
const uploadFile = event => {
const { files } = event.target;
for (let i = 0; i < files.length; i++) {
const load = new FileReader()
load.readAsDataURL(files[i])
load.onload = res => {
const { result } = res.target
const obj = {
url: result,
data: files[i]
}
setPreview(preview.push(obj))
setI(true)
}
}
};
const handleChangeMarca = event => {
const { value } = event.target;
setMarca(value);
};
const handleChangeCantidad = event => {
const { value } = event.target;
setCantidad(value);
};
const submit = event => {
event.preventDefault();
Post("createArticle", { imagenes })
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err.response)
});
};
const classes = useStyles()
return (
<div className={classes.dea}>
<form
onSubmit={submit}
className={classes.roott}
autoComplete="off"
encType="multipart/form-data"
>
<TextField
label="Titulo"
type="text"
value={nombre}
onChange={handleChangeNombre}
className={classes.input}
required
/>
<TextField
label="Seccion"
type="text"
value={seccion}
onChange={handleChangeSeccion}
className={classes.input}
required
/>
<TextField
label="Marca"
type="text"
value={marca}
onChange={handleChangeMarca}
className={classes.input}
required
/>
<TextField
label="Precio"
value={precio}
onChange={handleChangePrecio}
InputProps={{
inputComponent: NumberFormatCustom,
}}
className={classes.input}
required
/>
<TextField
label="Descripcion"
type="text"
value={descripcion}
onChange={handleChangeDescripcion}
className={classes.input}
required
/>
<TextField
label="Cantidad"
type="text"
value={cantidad}
onChange={handleChangeCantidad}
className={classes.input}
required
/>
<input
type="file"
style={{ display: 'none' }}
id="image"
accept="image/*"
name="imagen"
multiple={true}
onChange={uploadFile}
/>
<label htmlFor="image" className={classes.upload}>
<Button
component="span"
variant="contained"
color="default"
className={classes.button}
startIcon={<CloudUploadIcon />}
>
Subir imagen
</Button>
</label>
<Button type="submit" variant="contained" color="primary">
Publicar
</Button>
</form>
<div className={classes.previewImages}>
<Typography className={classes.textHeaderImagePreview}>
Vista previa de la carta
</Typography>
<div>
<Card className={classes.root}>
<CardActionArea>
<div className={classes.section}>
<div className={classes.container}>
<GridContainer>
<GridItem xs={12} sm={12} md={12} className={classes.marginAuto}>
<Cards carousel style={{ margin: 0 }}>
<Carousel {...settings} >
{i ?
preview.map((item, i) => (
<div key={i}>
<img
src={item.url}
alt="imagen de demostracion"
className="slick-image"
/>
</div>
))
:
null}
</Carousel>
</Cards>
</GridItem>
</GridContainer>
</div>
</div>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{nombre}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{descripcion}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Ver
</Button>
<Button size="small" color="primary">
Ver mas tarde
</Button>
<Button size="small" color="secondary">
{precio ?
`$ ${precio}`
:
null
}
</Button>
</CardActions>
</Card>
</div>
</div>
</div>
)
}
por si no quedo claro el problema, lo redacto mas detallado a contiuacion,
//esta aplicacion esta echa con electron y react, esta aplicacion valga la redundancia, es para poder agegar productos en una pagina web que ya esta armada, la carta que nombro, es una demostracion de como va a quedar en la web, lo que quiero hacer aca, es que el usuario agrege imagenes del producto, y crear un Fileread para poder previsualizarla, no se si el problema sera que estoy agregando mal el obj
al estado, la verdad no se cual sera el problema, pero a la hora de subir la imagen la consola me devuelve que preview.map
no es una funcion, si no me explico bien seguire dando mas detalles.
preview.push(obj)
? Setea el resultado de meter el nuevo item en una nueva lista.