Select múltiple: setear valores en componentDidMount
Publicado por Antonio (1 intervención) el 10/01/2022 18:14:56
Buen día compañeros. Llevó unas semanas aprendiendo React.js y viendo algunos cursos, Internet, proyectos legacy y la documentación oficial, voy sacando los requerimientos. En esta ocasión, llevo varios días tratando de resolver un inconveniente con un Select con la opción IsMulti = true. Al ser parte de un CRUD básico, debe permitirme guardar, editar e eliminar opciones del mismo Select.
Mi escenario es el siguiente: logro guardar el listado de opciones sin problemas cuando estoy realizando el INSERT; pero, en el UPDATE no logro hacer que se carguen las diferentes opciones provenientes de la base de datos en el evento componentDidMount().
El código que estoy usando para setear las opciones que vienen desde la consulta en la BD, es el siguiente:
El INSERT es funcional; es el paso de setear los que están en la base de datos en el mismo "Select IsMulti= true" lo que me está dando problemas.
Cualquier sugerencia o comentario, será bienvenida. Gracias
Mi escenario es el siguiente: logro guardar el listado de opciones sin problemas cuando estoy realizando el INSERT; pero, en el UPDATE no logro hacer que se carguen las diferentes opciones provenientes de la base de datos en el evento componentDidMount().
El código que estoy usando para setear las opciones que vienen desde la consulta en la BD, es el siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
componentDidMount() {
this.getListaProductos();
}//Esta función tiene la consulta que selecciona los productosasync getListaProductos() {
let response = await fetch(selectORM, apiCall(
"Productos",
"SELECT", [{ field: "*" }], [{ value: "" }]
))
.then(response => response.json())
.then(data => {
if (typeof data === 'string') {
// window.location.href = '/error';} else {
let opcionesProductos = data.item;
opcionesProductos = opcionesProductos.map(p => {
return { value: p.IdProducto, label: `${p.Descripcion}` }
});
this.setState({ opcionesProductos });
this.getListaProductosEdit(this.props.listaCategorias.IdCategoria);
}})
.catch(err => {
console.log('ERR:' + err);
// window.location.href = '/expire';});
}handleSelectChangeProceso = (ProcesoSelected) => {
this.setState({ ProcesoSelected });
}async getListaProcesosEdit(IdCategoria) {
//Aquí uso la misma lógica para traer los registros a la base de datos a partir de la categoría seleccionada ylet response = await fetch(selectORM, apiCall(
`FN_ProductosCategoria(${IdCategoria})`,
"SELECT", [{ field: "*" }], [{ value: "" }],
""))
.then(response => response.json())
.then(data => {
if (typeof data === 'string') {
// window.location.href = '/expire';} else {
let opcionesProdCategorias = data.item;
let ProductosSelectedTmp = [];
opcionesProdCategorias = opcionesProdCategorias.map(p => {
ProductosSelectedTmp.push({ value: p.IdProducto, label: `${p.Descripcion}` });
if (ProductoSelectedTmp !== null && ProductoSelectedTmp !== undefined) {
//this.handleSelectChangeProducto(5); //Prueba enviado un valor fijo llamando el evento }return { value: p.IdProducto, label: `${p.Descripcion}` }
});
this.setState({ opcionesProductos });
}})
.catch(err => {
console.log('ERR:' + err);
// window.location.href = '/expire';});
}render(){
let { opcionesProductos, ProductoSelected } = this.state;
<Select isMulti = {true}
className={this.state.obligatorios !== true ? "basic-single" : "basic-singleError"}
value={this.state.ProcesoSelected.value }
//value={opcionesProcesos.filter(({ value }) => value === this.state.ProcesoSelected.value)} //defaultValue={1, 3, 5, 6} //value={opcionesProcesos.filter(({ value }) => value === this.state.ProcesoSelected.value)} //value={opcionesProcesos.filter(({ value }) => this.state.ProcesoSelected.value.includes)} //defaultInputValue={'Hola mundo'}defaultValue={'7'}
//defaultValue={[opcionesProcesos[0].value]}onChange={this.handleSelectChangeProceso}
name="select"
isDisabled={this.state.isDisabled}
placeholder="Procesos"
options={opcionesProcesos}
style={{ color: '#979797', borderRadius: '0px', width: '100%' }}
closeMenuOnSelect={false}
/>}El INSERT es funcional; es el paso de setear los que están en la base de datos en el mismo "Select IsMulti= true" lo que me está dando problemas.
Cualquier sugerencia o comentario, será bienvenida. Gracias
Valora esta pregunta
0