0

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.

1
  • Estás mutando preview directamente? preview.push(obj) ? Setea el resultado de meter el nuevo item en una nueva lista. Commented el 30 jul. 2020 a las 7:14

1 respuesta 1

0

Tal vez sea debido a la línea:

setPreview(preview.push(obj));

Intenta de la forma:

setPreview(prevState => ([...prevState, obj]));
2

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.