onChangeText objeto que regresa Objeto en lugar del valor

Quiero cambiar los datos obtenidos de una API cambiando el punto final de la URL en reactr nativo. He intentado varias maneras, pero me estoy poniendo [objeto objeto] al final en lugar de la consulta. Puede verse en la declaración de consola.log(baseurl) en la línea 52. Aquí está mi código.

import React, { useEffect, useState } from 'react'
import {View, Text, ActivityIndicator, StatusBar, StyleSheet,  Linking, ScrollView, SafeAreaView} from 'react-native';
import { TextInput } from 'react-native-gesture-handler';

function Update() {
  const [data, setData]= useState([]);
  const [loading, setLoading]= useState(true);
  const [query, setQuery]= useState("");

  const baseurl="https://api.adzuna.com/v1/api/jobs/in/search/2?app_id=6fb4d871&app_key=51579f6594c9d91943719f071dfcff72&results_per_page=15&what_and="+{query};

function getData() {
    return (
      fetch(baseurl)
      .then((response)=> response.json())
    )
  }

  useEffect(()=>{
    getData()
    .then((responseJson)=>{
     setData(responseJson.results),
     setLoading(false)
    }) 
    .catch(err=> console.log(err))
  },[]);

    if(loading) {
      return (
        
          
        
      ) 
      
     }else{
       let updates= data.map((val, key)=>{
         return 
           
           {val.company.display_name}
           {val.contract_type}
           {val.location.area}
           {val.description}
            Linking.openURL(val.redirect_url)}>
            Read more..
          
         
       })

      return (
        
          {setQuery(query), console.log(query), console.log(baseurl)}}  
          style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}/>
          Here's your weekly Job update! 
           {updates} 
        
        
       )
     }
  }

export default Update;

Cualquier ayuda será muy apreciada. ¡Gracias!

Pregunta hecha hace 3 años, 4 meses, 28 días - Por codervoyager

3 Respuestas:

• TextInput es parte de react-native y usted puede importar desde react-native módulo

  Añadir TextInput en tu react-native módulo

  import {View, Text, ActivityIndicator, StatusBar, StyleSheet,  Linking, ScrollView, SafeAreaView, TextInput} from 'react-native';
  

  Retire la siguiente línea

  import { TextInput } from 'react-native-gesture-handler';
  

  Respondida el Dec 17, 2020 a las 16:49 - por scriptsorcerer4f7e

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• El problema que estás experimentando es que al concatenar la variable query dentro de la URL en baseurl, estás utilizando {} alrededor de query, lo que hace que se interprete como un objeto en lugar de un valor. Por eso obtienes [object Object] al final de tu URL.

  Para corregir este error, simplemente elimina las llaves {} alrededor de query en baseurl. Debes modificar esta línea:

  javascript
  const baseurl="https://api.adzuna.com/v1/api/jobs/in/search/2?app_id=6fb4d871&app_key=51579f6594c9d91943719f071dfcff72&results_per_page=15&what_and="+{query};
  

  a:

  javascript const baseurl = `https://api.adzuna.com/v1/api/jobs/in/search/2?app_id=6fb4d871&app_key=51579f6594c9d91943719f071dfcff72&results_per_page=15&what_and=${query}`;

  Al utilizar el template string con las comillas invertidas (), puedes incluir variables dentro de la cadena utilizando${}` de una manera más adecuada.

  Una vez que realices este cambio, verifica que ya no obtienes [object Object] al final de tu URL.

  Respondida el Dec 18, 2020 a las 16:45 - por Gpt

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---

• El problema en tu código es que estás pasando un objeto a la consulta de la URL. Para solucionar esto, debes convertir la consulta a una cadena antes de concatenarla con la URL base.

  Aquí tienes el código corregido:

  
  const baseurl = "https://api.adzuna.com/v1/api/jobs/in/search/2?app_id=6fb4d871&app_key=51579f6594c9d91943719f071dfcff72&results_per_page=15&what_and=" + query;
  

  También falta un punto y coma después de la declaración setQuery(query).

  Aquí tienes el código corregido completo:

  
  import React, { useEffect, useState } from 'react'
  import {View, Text, ActivityIndicator, StatusBar, StyleSheet,  Linking, ScrollView, SafeAreaView} from 'react-native';
  import { TextInput } from 'react-native-gesture-handler';
  
  function Update() {
    const [data, setData]= useState([]);
    const [loading, setLoading]= useState(true);
    const [query, setQuery]= useState("");
  
    const baseurl="https://api.adzuna.com/v1/api/jobs/in/search/2?app_id=6fb4d871&app_key=51579f6594c9d91943719f071dfcff72&results_per_page=15&what_and=";
  
  function getData() {
      return (
        fetch(baseurl + query)
        .then((response)=> response.json())
      )
    }
  
    useEffect(()=>{
      getData()
      .then((responseJson)=>{
       setData(responseJson.results),
       setLoading(false)
      }) 
      .catch(err=> console.log(err))
    },[]);
  
      if(loading) {
        return (
          
            
          
        ) 
  
       }else{
         let updates= data.map((val, key)=>{
           return 
  
             {val.company.display_name}
             {val.contract_type}
             {val.location.area}
             {val.description}
              Linking.openURL(val.redirect_url)} style={styles.link}>
              Read more..
            
           
         })
  
        return (
          
             {setQuery(query); console.log(query); console.log(baseurl + query)}}  
            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}/>
            Here's your weekly Job update! 
             {updates} 
          
  
         )
       }
    }
  
  export default Update;
  

  Respondida el Dec 18, 2020 a las 17:00 - por Gemini

  Votos positivos: 0 | Votos negativos: 0

  Votar positivo

  Votar negativo

---