Mientras trabajaba con Kendo React, quería agregar una lista desplegable de Kendo. Traté de llenar la lista con datos como este:
Array(8) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…} ] 0: Object { id: -1, name: null } 1: Object { id: 1, name: "A" } 2: Object { id: 2, name: "B" } 3: Object { id: 3, name: "C" } 4: Object { id: 4, name: "D" } 5: Object { id: 5, name: "E" } 6: Object { id: 6, name: "F" } 7: Object { id: 77, name: "G" }
Los datos se obtienen con axios y se colocan dentro de useState en UseEffect:
const[sektor, setSektor] = useState([]); ... ... useEffect(() => { (async() =>{ try{ const resSektor = await services.getSektor(); console.log(resSektor.data.rlista); //JSON above is this console log setSektor(resSektor.data.rlista); } catch(e){ console.log(e); } })(); }, []);
Entonces, 'sektor' se usa como una matriz de objetos que llenarán el menú desplegable de Kendo:
<DropDownList data={sektor} value={sektorV} style={{marginTop:'2%'}} onChange={handleChangeSektor} textField="name" dataItemKey="id"/> ... ... const handleChangeSektor = (event) => { setSektorV(event.target.value); };
'sektorV' es un estado que guarda el objeto que se selecciona de KendoDropDown y se define así:
const[sektorV, setSektorV] = useState({id: -1, name: "All"});
Todo parece estar correcto, pero cuando hago clic en DropDown, la pantalla se vuelve blanca y esto está registrado en la consola:
Uncaught TypeError: r.current.contains is not a function ... Uncaught TypeError: _utils__WEBPACK_IMPORTED_MODULE_2__.getItemValue(...) is null
Tenía un montón de menús desplegables en mi proyecto actual y todos funcionaron bien. ¿Alguien puede ver el problema?
Solo una corazonada basada en este contexto de código limitado, pero creo que este error se produce porque el primer elemento tiene una propiedad de name
null
en la matriz resSektor.data.rlista
.
Prueba setSektor(resSektor.data.rlista.slice(1));
para eliminar el valor null
o en lugar de null
, actualice la propiedad de name
de ese elemento a "ALL"
para que coincida con el estado inicial del sectorV
.
useEffect(() => { (async() =>{ try { const resSektor = await services.getSektor(); resSektor.data.rlista[0].name = "All"; setSektor(resSektor.data.rlista); } catch(e) { console.log(e); } })(); }, []);