3

Presento el siguiente error :TypeError: guardarbusqueda is not a function. (In 'guardarbusqueda((0, _extends2.default)({}, busqueda, { pais: pais }))', 'guardarbusqueda' is an instance of Object)

A continuación mi código

Formulario.js
En este archivo js he colocado todo con respecto al formulario en este caso un picker para seleccionar un país y botón para que al presionarlo consulte una api y pueda obtener información de los países.

import  React,{useState} from 'react';
import { Text, TextInput, View, StyleSheet, TouchableWithoutFeedback,Animated,Alert }
from 'react-native';
import {Picker} from '@react-native-community/picker';
const Formulario=(busqueda,guardarbusqueda)=>{
const {pais}=busqueda;
const [animacionboton]=useState(new Animated.Value(1));

const consultarPais=()=>{
  if(pais.trim()===''){
    mostarAlerta();
    return;
  }
  //Consultar API
 guardarconsultar(true);
};

const mostarAlerta=()=>{
    Alert.alert('Error','Debe seleccionar un país'),[{Text:'Entendido'}];
};

const animacionEntrada=()=>{
    Animated.spring(animacionboton,{
        toValue:.9,
        useNativeDriver: true // Add This line
    }).start();
  };

  const animacionSalida=()=>{
     Animated.spring(animacionboton,{
       toValue:1,
       useNativeDriver: true // Add This line
      }).start();
  };

  const estiloAnimacion={
    transform:[{
      scale:animacionboton
    }]
  };


return(
<>
<View>
<View>
<Text style ={styles.input}>Pais</Text>
</View>
<View>
<Picker 
selectedValue={pais}
onValueChange={pais=>guardarbusqueda({...busqueda,pais})}

onPress={()=>consultarPais()}
style={styles.itempais}>
<Picker.Item label="--seleccione un pais--" value=""/>
<Picker.Item label="El Salvador" value="sv"/>
<Picker.Item label="Guatemala" value="gt"/>
<Picker.Item label="Honduras" value="hn"/>
<Picker.Item label="Nicaragua" value="ni"/>
<Picker.Item label="Panama" value="pa"/>
<Picker.Item label="Costa Rica" value="cr"/>
<Picker.Item label="Mexico" value="mx"/>
<Picker.Item label="Argentina" value="ar"/>
<Picker.Item label="Estados Unidos" value="us"/>
<Picker.Item label="Colombia" value="co"/>
<Picker.Item label="España" value="es"/>
<Picker.Item label="Peru" value="pe"/>
</Picker>
</View>
<TouchableWithoutFeedback 
onPressIn={()=>animacionEntrada()} 
onPressOut={()=>animacionSalida()}
>

<Animated.View style={styles.btnBuscar}>
<Text style={styles.textoBuscar}>Buscar País</Text>
</Animated.View>
</TouchableWithoutFeedback>
</View>
    </>
  );
};

const styles= StyleSheet.create({
input:{padding:10,
height:50,
fontSize:20,
marginBottom:20,
textAlign:'center',
color :'#000'
},
itempais:{
height:60,
backgroundColor:'#fff',
},
btnBuscar:{
marginTop:50,
height:50,
backgroundColor:'#000',
fontSize:20,
marginBottom:20,
textAlign:'center'
},
textoBuscar:{
color:'#fff',
fontWeight:'bold',
textTransform:'uppercase',
textAlign:"center",
fontSize:18
}
})
export default Formulario;

Pais.js
En este archivo js un componente card para mostrar la información del país seleccionado.

import React from 'react';
import { StyleSheet, View, Text} from 'react-native';
import { Card } from 'react-native-elements';
const Pais = ({ resultado }) => {
const { capital, name, subregion, region } = resultado;
return (
<Card>
<Card.Title>{name}</Card.Title>
<Card.Divider />
<View style={{ justifyContent: 'center' }}>
<Text>Capital:{capital}</Text>
<Text>Region:{region}</Text>
<Text>Subregion:{subregion}</Text>
</View>
</Card>
);
};
export default Pais;

index.js
En este archivo js he colocado toda la lógica de la aplicación.

import React,{useState,useEffect} from 'react';
import {Text,View,StyleSheet,Alert,AppRegistry} from 'react-native';
import Formulario from './src/components/Formulario';
import Pais from './src/components/Pais';
export default function App(){

const [busqueda,guardarbusqueda]=useState({
  pais:'',
});

const [consultar,guardarconsultar]=useState(false);
const [resultado,guardarresultado]=useState({});

useEffect(()=>{
  
  const {pais} = busqueda;
    const consultarPais = async () => {
      if(consultar){
        const url='https://restcountries.eu/rest/v2/alpha/${pais}';
        try{
          const respuesta = await fetch(url);
          const resultado = await respuesta.json();

          guardarresultado(resultado);
          guardarconsultar(false);
        }catch(error){
          mostrarAlerta();
        }
      }
    };
    consultarPais();
},[consultar]);

const mostrarAlerta=()=>{
  Alert.alert('Error','No hay resultado intenta con otra ciudad o país'),[{Text:'Ok'}];
};

return(
<View>
  <View>
  <Formulario
  busqueda={busqueda}
  guardarbusqueda={guardarbusqueda}
 guardarconsultar={guardarconsultar}
  />
<Pais resultado={resultado}/>
  </View>
  </View>
  
);


}
AppRegistry.registerComponent('paises', () => App);

1 respuesta 1

1

Parece que se esta usando un antipatrón en la declaración del componente Formulario, hay dos formas para pasar parametros:

  • Destructurar
  • Pasar el parametro props

El error aquí no muestra el mensaje, pero si se corre esta pieza de código en VSCODE se mostrará el mensaje:

TypeError: guardarbusqueda is not a function. (In 'guardarbusqueda({ ...busqueda, pais: city })', 'guardarbusqueda' is an instance of Object)

function App(){
  const [busqueda,guardarbusqueda]=React.useState({pais:'',});
  return (
   <div>
     <Formulario
      busqueda={busqueda}
      guardarbusqueda={guardarbusqueda}/>
   </div>
  )
}
//Aqui hay un antipatron
//o se destructuran los parametros
//o se pasa el parametro props
const Formulario=(busqueda,guardarbusqueda)=>{

React.useEffect(()=>{
   let city = "Sin City";
   guardarbusqueda({...busqueda,pais:city});
},[]);

return <p>"in Formulario Comp:" {busqueda.pais}</p>
}
 ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>

Este es el patrón correcto:

function App(){
  const [busqueda,guardarbusqueda]=React.useState({pais:'',});
  return (
   <div>
     <Formulario
      busqueda={busqueda}
      guardarbusqueda={guardarbusqueda}/>
   </div>
  )
 }
//se destructuran los parametros
const Formulario=({busqueda,guardarbusqueda})=>{

React.useEffect(()=>{
   let city = "Sin City";
   guardarbusqueda({...busqueda,pais:city});
},[]);

return <p>"In Formulario Comp:" {busqueda.pais}</p>
}
 ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>

Espero que esta respuesta sea de ayuda.

4
  • Lo he probado y siempre me aparece el mismo mensaje de error. el 27 sep. 2021 a las 3:38
  • Sugiero que des una doble revisión a tu código, te deje una demostración funcional.
    – g.4
    el 27 sep. 2021 a las 3:57
  • lo que me ocasiona problemas es lo siguiente : onValueChange={pais=>guardarbusqueda({...busqueda,pais})} el 27 sep. 2021 a las 4:05
  • Claro, el componente Formulario nos esta diciendo que guardarbusqueda no es una función, no la reconoce porque no la estamos destructurando en la declaración: const Formulario=(busqueda,guardarbusqueda)=>{; Debe ir así : const Formulario=({busqueda,guardarbusqueda})=>{, te lo demostré en el ejemplo.
    – g.4
    el 27 sep. 2021 a las 4:09

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.