this.setState en matrices anidadas

votos
1

EDITAR**

Reaccionar actualmente mi estado se parece a esto.

this.state = {
    data: {
      groups: [[]]
    },
    preview: [[]]
}

Los elementos en grupos también son matrices que contienen archivos. Tengo un controlador de eventos de cambio de archivos que actualmente tiene este aspecto.

handlePhotoChange(e, index) {
    e.preventDefault()

    let reader = new FileReader()
    let file = e.target.files[0]

    const { data, photoPreview } = this.state
    const { groups } = data

    reader.onloadend = () => {
        this.setState({
            data: {
                ...data,
                groups: [...groups, [...[index], file]]
                // tried: groups: [[...index], file]
            },
            preview: [...preview, [...[index], reader.result]]
            // tried: preview: [[...index], reader.result]
        })
    }

    reader.readAsDataURL(file)
}

En este momento esta es la adición de otro grupo y la vista previa de la foto está en el segundo grupo. Cuando hice el código ## ## trató sólo añade el reader.result a la vista previa y los grupos [0] se quedó nulo. Y cuando he añadido otro archivo que reemplazó a la reader.result en la vista previa [0] [0]

Publicado el 19/09/2018 a las 17:16
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
0

En lugar de group: [...group, [file]]usar Array#concatun método similargroup: Array.isArray(group) ? group.concat([[file]]) : [[file]]

Y sólo hacer lo mismo con preview

Respondida el 19/09/2018 a las 17:31
fuente por usuario

votos
0

Se puede intentar algo así como más adelante

reader.onloadend = () => {
    this.setState(prevState => ({
      data: {
          groups: [...prevState.groups, [file]]
          // attempted - groups[index]: [...groups[index], [file]] - error
      },
      preview: [...prevState.preview, [reader.result]]
    }));
  }
Respondida el 19/09/2018 a las 17:26
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more