I'm building an app with react-native and I get the following error:
This is the file where I get that error:
This is all the code of my file with error:
import React, {Component} from 'react';
import {
Container,
Content,
Header,
Title,
CardItem,
Left,
Body,
Right,
Text,
Icon,
Button,
Spinner,
Card,
Picker,
View
} from 'native-base';
import {Dimensions, AsyncStorage, ScrollView, FlatList, Image, TouchableOpacity} from 'react-native';
import {Col, Row, Grid} from "react-native-easy-grid";
const {width, height} = Dimensions.get ('window'); const Item = Picker.Item; import {DATA_USER_KEY, TOKEN_USER_KEY} from './constants'; import {VentanaGrilla} from './datosGrilla';
export default class Settings extends Component {
constructor(props) {
super(props);
this.state = {
encabezado: [], //Valor de los datos del encabezado del tablero
datos: [], //Valor de los datos en JSON que trae el WS para armar las grillas
filtros: [], //Valor de los filtros en JSON que trae el WS para armar las grillas
dataIsCargada: 0, //Indica si ya se cargo las grillas
cmbFiltro: [], //Todos los combos de los filtros que tiene el tablero
cmbCombinaciones: [], //Todos los códigos agrupados que tiene el tablero
codGrupoBusqueda: null, //Código agrupado que se enviara al WS
codGrilla: 0,
datosModalGrilla: [],
visible: false,
fechaActualiza: '',
botonCerrar: []
}
console.log("este es el error"+this.props.dataAcciones);
}
componentDidMount() {
this.getDatosGrillas();
}
//Ordena de forma ascendente los índices de un arreglo, útil para ordenar los filtros y las grillas
ksort(obj) {
var keys = Object
.keys(obj)
.sort(),
sortedObj = {};
for (var i in keys) {
sortedObj[keys[i]] = obj[keys[i]];
}
return sortedObj;
}
//Cambia el valor de los combobox al momento de seleccionar otra opción
onValueChange(key, value) {
let cmbFiltroActual = this.state.cmbFiltro; //Carga los filtros que existen acutalmente
cmbFiltroActual[key] = value; //Reemplaza el valor que se cambio
this.setState({cmbFiltro: cmbFiltroActual}); //Se actualiza el array
}
//Obtiene el código agrupado de la busqueda, de acuerdo a los filtros seleccionados
getTableroFiltro() {
let datos = this.state.cmbFiltro; //Carga los filtros seleccionados que existen acutalmente
var indBusqueda = [];
for (let clave in datos) {
indBusqueda[datos[clave]] = datos[clave]; //Recorre todos los filtros, alimentando el nuevo array
}
var txtIndBusqueda = 'ID_'; //Prefijo de odos los códigos agrupados que tiene el tablero
var j = 0;
let datosIndBusqueda = this.ksort(indBusqueda); //Ordena el índice de busqueda de manera descendente
for (let clave in datosIndBusqueda) {
if (j == 0) {
txtIndBusqueda = txtIndBusqueda + clave;
} else {
txtIndBusqueda = txtIndBusqueda + '_' + clave;
}
j++;
}
//Estlece cual será el codGrupoBusqueda con el que buscara nuevamente en el WS
this.state.codGrupoBusqueda=this.state.cmbCombinaciones[txtIndBusqueda];
this.setState({dataIsCargada: 2});
//Invoca la función de armar las grillas, para realizar nuevamente la consulta al WS con el codGrupoBusqueda
this.getDatosGrillas();
}
//Construye las grillas que se mostraran en el RENDER del componente
construirGrillas(encabezado, datos, filtros) {
let listView = [];
let combos = [];
let contenedorGrillasFilas = [];
//Establece todos los códigos agrupados que tiene el tablero
let datosCombinaciones = this.ksort(filtros.combinaciones);
for (let clave in datosCombinaciones) {
this.state.cmbCombinaciones[datosCombinaciones[clave]] = clave;
}
//Construye los combobox con los filtros obtenidos del WS
let datosCombos = this.ksort(filtros.combos); //Ordena los índices de los combos de manera ascendente
let keyCombo = 0;
for (let clave in datosCombos) { //Recorre los filtros
//Ordena los valores de los índices de los combos de manera ascendente
let valoresCombos = this.ksort(datosCombos[clave].valores);
var cmbItems = [];
let keyItem = 0;
for (let claveValor in valoresCombos) { //Recorre los valores de cada filtro
//Si el valor esta definido por defecto y no hay seleccionado aun un valor, se establece este por defecto
if (valoresCombos[claveValor].ind_defecto == 1 && this.state.cmbFiltro['cmbFiltro_' + clave] == null) {
this.state.cmbFiltro['cmbFiltro_' + clave] = claveValor;
}
cmbItems.push(<Item label={valoresCombos[claveValor].value} value={claveValor} key={keyItem}/>)
keyItem ++;
}
//Se alimenta la vista que contendrá este filtro
combos.push(
<View key={clave+901} style={{borderBottomWidth:1,
borderColor:'#C7D93D',
margin:3,marginBottom:12}}>
<Text key={clave+'aaaaa'}
style={{
fontWeight: 'bold',
margin: 0.2,
fontSize: 16,
color:'#08A689'
}}>
{datosCombos[clave].des_ind_busqueda}</Text>
<Picker key={keyCombo+'clave1'}
mode='dropdown'
selectedValue={this.state.cmbFiltro['cmbFiltro_' + clave]}
onValueChange={this
.onValueChange
.bind(this, 'cmbFiltro_' + clave)}>
{cmbItems}</Picker>
</View>
)
keyCombo ++;
}
//Se carga el botón de la consulta, para cuando se quiera buscar por un nuevo filtro
if(this.state.dataIsCargada==2){
listView.push(
<View key={keyCombo+930}>{combos}
<Button key={keyCombo+90}
rounded block
title="Consultar"
color="#C1C1FC"
onPress={this
.getTableroFiltro
.bind(this)}
style={{
width: width-80,
marginHorizontal:40,
borderColor: '#888888',
borderRadius: 5,
backgroundColor: '#08A689'
}}>
<Text key={keyCombo+'combo'}>Consultar</Text>
</Button><Spinner color="green"/>
<Text></Text>
</View>
)
}
else{
listView.push(
<View key={keyCombo+800}>
{combos}
<Button key={keyCombo+700}
rounded block
title="Consultar"
color="#C1C1FC"
onPress={this
.getTableroFiltro
.bind(this)}
style={{
width: width-80,
marginHorizontal:40,
borderColor: '#888888',
borderRadius: 5,
backgroundColor: '#08A689'
}}>
<Text key={keyCombo+100}>Consultar</Text>
</Button>
</View>)
}
//Construye los datos de las grillas
let datosGrilla = this.ksort(datos); //Ordena de manera ascendente los valores de la grilla
let keyGrilla = 0;
let keyCards = 0;
let tamanoCampo= 100;
let tamanoFila= 40;
var numFilaIconGrilla = 0;
var contenedorGrillasColum = [];
var numeroColumnas = 0;
var valorJson;
var valorColumna='';
var distribucionColumna=0;
var distribucionFila=0;
var tamanioH=20;
var tamanioW=1;
var widthCell=[];
var contadorCell=0;
var widthCell1=0;
var negrilla='';
var alineacion='';
for (let clave in datosGrilla) { //Recorre cada grilla
keyCards++;
this.state.datosModalGrilla[clave]=[];
let j = 0;
let datosFila = this.ksort(datos[clave].valores); //Ordena de manera ascendente los valores de las filas
var filas = [];
var combinarCelda = new Array(Object.keys(datos[clave].valores).length);
for (var i = 0; i < Object.keys(datos[clave].valores).length+2; i++) {
combinarCelda[i] = new Array(Object.keys(datos[clave].valores[1]).length+2);
}
for (let claveFila in datosFila) { //Recorre cada fila de la grilla
let datosCampo = this.ksort(datos[clave].valores[claveFila]); //Ordena de manera ascendente los valores de las columnas
for (let claveCampo in datosCampo) {
if(datos[clave].valores[claveFila][claveCampo]!=null){
valorJson=this._obtenerCampoJson(datos[clave].valores[claveFila][claveCampo]);
}
else{
valorJson='';
datos[clave].valores[claveFila][claveCampo]='';
}
if(valorJson.valor!=null && valorJson.valor!=''){
valorColumna=valorJson.valor;
}
else{
valorColumna=datos[clave].valores[claveFila][claveCampo];
}
if(widthCell[claveCampo]==null){
widthCell[claveCampo]=0;
}
if(valorColumna.length*9>widthCell[claveCampo]){
widthCell[claveCampo]=valorColumna.length*9;
}
}
}
for (let claveFila in datosFila) { //Recorre cada fila de la grilla
j++;
let datosCampo = this.ksort(datos[clave].valores[claveFila]); //Ordena de manera ascendente los valores de las columnas
if (j == 1) { //Si es el primer registro
var columnas = [];
for (let claveCampo in datosCampo) { //Recorre cada columna de cada fila de la grilla
if(combinarCelda[claveFila][claveCampo]==null){
valorJson=this._obtenerCampoJson(datos[clave].valores[claveFila][claveCampo]);
tamanioW=1;
if(valorJson.valor!=null && valorJson.valor!=''){
valorColumna=valorJson.valor;
distribucionColumna=parseInt(valorJson.horizontal)*tamanoCampo;
distribucionFila=parseInt(valorJson.vertical)*tamanoFila;
for(var z=claveFila;z<parseInt(claveFila)+parseInt(valorJson.vertical);z++){
combinarCelda[z][claveCampo]=parseInt(claveFila)+parseInt(valorJson.vertical)-1;
}
for(var z=claveCampo;z<parseInt(claveCampo)+parseInt(valorJson.horizontal);z++){
tamanioW=valorJson.horizontal;
combinarCelda[claveFila][z]=true;
}
}
else{
distribucionColumna=tamanoCampo;
distribucionFila=tamanoFila;
valorColumna=datos[clave].valores[claveFila][claveCampo];
}
contadorCell = 1;
widthCell1=widthCell[claveCampo];
while (combinarCelda[claveFila][parseInt(claveCampo)+contadorCell]!=null) {
widthCell1 = widthCell1 + widthCell[parseInt(claveCampo)+contadorCell];
contadorCell++;
}
columnas.push(
<Col collapsable
key={claveCampo+'algo'} style={{
padding: 2,
backgroundColor: '#08A689',
borderColor:'#82BF56',
height:tamanioH,
width:widthCell1,
borderTopWidth: 1,
borderBottomWidth: (combinarCelda[claveFila][claveCampo]!==true && combinarCelda[claveFila][claveCampo]!=null) ? 0 : 1,
borderLeftWidth: (claveCampo==1) ? 1 : 0,
borderRightWidth: (claveCampo==Object.keys(datos[clave].valores[1]).length) ? 2 : 1,
}} >
<Text
key={claveCampo+'text'}
style={{
textAlign : 'center',
fontWeight: 'bold',
color:'white',
fontSize: 12}}>
{valorColumna}</Text>
</Col>
)
}
}
} else { //Si no es el primer registro
var columnas = [];
for (let claveCampo in datosCampo) { //Recorre cada columna de cada fila de la grilla
if(combinarCelda[claveFila][claveCampo]==null){
negrilla='N';
alineacion='right';
valorJson=this._obtenerCampoJson(datos[clave].valores[claveFila][claveCampo]);
tamanioW=1;
if(valorJson.valor!=null && valorJson.valor!=''){
valorColumna=valorJson.valor;
if(valorJson.alineacion!=null){
if(valorJson.alineacion.toUpperCase()=='D') {
alineacion = 'right';
}
else if(valorJson.alineacion.toUpperCase()=='I') {
alineacion = 'left';
}
else if(valorJson.alineacion.toUpperCase()=='C') {
alineacion = 'center';
}
}
if(valorJson.negrilla!=null){
if(negrilla.toUpperCase()=='S') {
negrilla = 'S';
}
}
distribucionColumna=parseInt(valorJson.horizontal)*tamanoCampo;
distribucionFila=parseInt(valorJson.vertical)*tamanoFila;
for(var z=claveFila;z<parseInt(claveFila)+parseInt(valorJson.vertical);z++){
combinarCelda[z][claveCampo]=parseInt(claveFila)+parseInt(valorJson.vertical)-1;
}
for(var z=claveCampo;z<parseInt(claveCampo)+parseInt(valorJson.horizontal);z++){
tamanioW=valorJson.horizontal;
combinarCelda[claveFila][z]=true;
}
}
else{
distribucionColumna=tamanoCampo;
distribucionFila=tamanoFila;
valorColumna=datos[clave].valores[claveFila][claveCampo];
}
contadorCell = 1;
widthCell1=widthCell[claveCampo];
while (combinarCelda[claveFila][parseInt(claveCampo)+contadorCell]!=null) {
widthCell1 = widthCell1 + widthCell[parseInt(claveCampo)+contadorCell];
contadorCell++;
}
columnas.push(
<Col collapsable key={claveCampo+'delta'} style={{
borderColor:'#82BF56',
height:tamanioH,
width:widthCell1,
backgroundColor : (negrilla=='S'
||distribucionColumna!=tamanoCampo || distribucionFila!=tamanoFila) ? '#08A689' : 'white',
borderBottomWidth: (claveFila==Object.keys(datos[clave].valores).length) ? 2 : 1,
borderLeftWidth: (claveCampo==1) ? 1 : 0,
borderRightWidth: (claveCampo==Object.keys(datos[clave].valores[1]).length) ? 2 : 1,
padding: 2}} >
<Text style={{
textAlign : alineacion,
fontWeight: (negrilla=='S'
||distribucionColumna!=tamanoCampo || distribucionFila!=tamanoFila ) ? 'bold' : 'normal',
color : ( negrilla=='S'
||distribucionColumna!=tamanoCampo || distribucionFila!=tamanoFila ) ? 'white' : 'gray',
fontSize: 12}}
key={claveCampo+'text'}>
{valorColumna}</Text>
</Col>
)
}
else if(combinarCelda[claveFila][claveCampo]!==true){
tamanioW=1;
contadorCell = 1;
widthCell1=widthCell[claveCampo];
while (combinarCelda[claveFila][parseInt(claveCampo)+contadorCell]!=null) {
widthCell1 = widthCell1 + widthCell[parseInt(claveCampo)+contadorCell];
contadorCell++;
}
columnas.push(
<Col collapsable key={claveCampo+'delta'} style={{
borderColor:'#82BF56',
height:tamanioH,
width:widthCell1,
backgroundColor : (negrilla=='S'
||distribucionColumna!=tamanoCampo || distribucionFila!=tamanoFila) ? '#08A689' : 'white',
borderBottomWidth: (claveFila==combinarCelda[claveFila][claveCampo]) ? 1 : 0,
borderLeftWidth: (claveCampo==1) ? 1 : 1,
borderRightWidth: (claveCampo==Object.keys(datos[clave].valores[1]).length) ? 2 : 1,
padding: 2}} >
<Text key={claveCampo+'text1'}>
{' '}</Text>
</Col>
)
}
}
}
//Carga cada fila
filas.push(
<Row collapsable key={claveFila+'aaaacc'} nowrap style={{
justifyContent: 'center',
alignItems: 'stretch',
flexDirection: 'row'}}>
{columnas}
</Row>
)
}
//Arma la grilla finalmente
numeroColumnas=parseInt(Object.keys(datos[clave].valores[1]).length)*parseInt(tamanoCampo)+parseInt(35);
this.state.datosModalGrilla[clave].push(
<CardItem
header
key={keyCards+'cadda'}
style={{
justifyContent: 'center',
width: width-50,
height: 75,
borderWidth: 0.5,
backgroundColor: '#08A689',
borderColor: '#888888',
borderRadius: 5
}}>
<Text style={{color: 'white', fontWeight: 'bold',}} key={keyCards+'aaaccvvv'}>{datos[clave].des_grilla}</Text>
</CardItem>
)
this.state.datosModalGrilla[clave].push(
<ScrollView
showsHorizontalScrollIndicator={false}
key={keyCards} horizontal >
<CardItem header key={keyCards+'card'}
style={{justifyContent: 'center', height:height-340 ,
flexDirection:'column', flexWrap: 'wrap', flex: 1}} contentContainerStyle={{flexGrow: 1}} >
<ScrollView key={keyCards+900} style={{height:height-330 }}>
<Grid key={keyCards} style={{marginBottom:80}}>
{filas}
</Grid>
</ScrollView>
</CardItem>
</ScrollView>
)
numFilaIconGrilla++;
contenedorGrillasColum.push(
<Col key={numFilaIconGrilla+900} style={{height: 180,width:180, marginRight:0.5,alignItems:'center'}}>
<View style={{alignItems:'center'}}>
<Button
transparent danger
key={keyGrilla}
title={datos[clave].des_grilla}
style={{width: 140, height: 140,borderWidth:1,flexDirection:'column',borderColor:'gray',
borderRadius:5}}
onPress={() => this.setState({visible:!this.state.visible, codGrilla: clave})}>
<TouchableOpacity style={{alignItems:'center'}}
onPress={this._onPressButton} onPress={() => this.setState({visible:!this.state.visible, codGrilla: clave,
fechaActualiza:datos[clave].fecha_actualiza})}>
<Image source={require('./../imagenes/grila.png')} style={{width: 70, height: 70,
paddingVertical:2,paddingHorizontal:2}}/>
<Text key={keyGrilla}
style={{ borderTopWidth:2,borderColor:'gray',marginTop:4,
width:110,
fontSize: 9,
textAlign: 'center',
color:'#08A689',
}}>{datos[clave].des_grilla}</Text>
</TouchableOpacity>
</Button>
</View>
</Col>)
if(numFilaIconGrilla>=2){
numFilaIconGrilla=0;
contenedorGrillasFilas.push(
<Row key={keyGrilla+900} >
{contenedorGrillasColum}
</Row>)
contenedorGrillasColum = [];
}
keyGrilla++;
}
if(numFilaIconGrilla!=0){
contenedorGrillasFilas.push(
<Row key={keyGrilla+'grilla'} >
{contenedorGrillasColum}
</Row>)
}
listView.push(
<Grid key={keyGrilla+'grilla'} style={{width:width,flexDirection: 'column',marginTop:30,
alignContent:'center',justifyContent:'space-between'}}>
{contenedorGrillasFilas}
</Grid>
)
this.state.botonCerrar=[];
this.state.botonCerrar.push( <Button key={'mm'+1} transparent onPress={() => this.setState({visible:!this.state.visible})}>
<Image source={require('./../imagenes/cerrar.png')} style={{width: 40, height: 40,zIndex:20}}/>
</Button> );
return listView;
}
//Realiza la conexión al WS de manera asincrona
getDatosAsync = async() => {
//Carga los valores con los que se consultará el WS
let data = this.props.state.dataAcciones;
//let dataServer = JSON.parse(data)
let codAccion = data.cod_accion_sistema;
let desServicio = data.des_accion_sistema;
let ruta_app = data.ruta_app;
let codGrupoBusqueda = this.state.codGrupoBusqueda;
//Si las variables principales no estan vacías, realiza la consulta
if (codAccion !== '' && desServicio !== '') {
let token = await AsyncStorage.getItem(TOKEN_USER_KEY);
await this
.props
.actions
.fetchPost(ruta_app, {cod_accion_sistema: codAccion, codGrupoBusqueda:codGrupoBusqueda,cache:Math.random() }, token);
let dataWS = await this.props.state.fetchData;
console.log(dataWS);
//if(dataWS.error === ''){
try {
// Parsea los datos en JSON que obtiene del WS
let jsonData = JSON.stringify(dataWS);
let objData = JSON.parse(jsonData);
//Carga los datos localmente para ser usado en el componente
this.setState({dataIsCargada: 1, encabezado: objData[0].encabezado, datos: objData[0].datos, filtros: objData[0].filtros});
} catch (error) { //Si hubieron errores
console.log(error)
}
//}
} else { //Si hubieron errores
let mensaje = '';
if (codAccion === '') {
mensaje = 'Error el código acción es inválido.';
}
if (desServicio === '') {
mensaje = mensaje + '\n Error el nombre del servicio es inválido.';
}
Toast.show({text: mensaje, position: 'bottom', buttonText: 'Ok'})
}
}
I appreciate the help