1

Buenas estoy armando un componente hook de react y al hacer una request con axios y manipulando la respuesta colocandola en el estado de mi componente me tira error por que me dice que no se puede manipular undefined... creo que el error podria orientarse un poco por lo que el console.log me devuelve en la consola(2 respuestas)- undefined- y el array

import React,{useState,useEffect} from 'react'
import Select from 'react-select'
import axios from 'axios';


export default function SelectFormCategory(){

    const [data, setData] = useState([]);

    async function getCategories(){
        const categories = await axios.get('http://localhost:3001/categories')
        setData(categories.data)
    }
  console.log( data[0]);

    useEffect(() => {
        getCategories();
      }, []);
    return (
  <Select defaultValue={} options={} />        
    )}

que podría hacer para que ese undefined no me salga, poder manipular el array y poner de cada objeto su propiedad name dentro del select "option" ? gracias

5
  • Bienvenido a Stack Overflow en Español, lo que estas obteniendo es normal, el primer log viene undefined pues estas iniciando el estado de la variable data con un array vacío, luego se ejecuta la función asincrónica del hook, el componente se renderiza nuevamente, pero esta vez ya tienes datos en el scope para data, puedes revisar la siguiente respuesta para que despejes tus dudas, si te sirve vota por ella, esta es una pregunta muy común en la comunidad React SO, saludos
    – g.4
    el 23 ene. 2021 a las 19:19
  • exacto tienes razon , el problema es que al querer manipular ese estado y querer colocarlo dentro del select el component se rompe porque toma primero el undefined...como podria hacer para una vez obtenido ese estado lo pueda colocar en el select? el 23 ene. 2021 a las 19:24
  • Prepare una respuesta, espero que sea de ayuda, Saludos
    – g.4
    el 23 ene. 2021 a las 19:46
  • Justo edité la respuesta con unas mejoras e información adicional que puede ser de ayuda.
    – g.4
    el 23 ene. 2021 a las 19:59
  • He agregado también un prototipo para el select, avísanos si tienes dudas o si lograste avanzar, saludos
    – g.4
    el 24 ene. 2021 a las 3:46

1 respuesta 1

0

Bienvenido a Stack Overflow en Español, lo que estas obteniendo es normal, el primer log viene undefined pues estas iniciando el estado de la variable data con un array vacío, por lo tanto array[0]=undefined.

Luego, se ejecuta la función asincrónica del hook, el componente se renderiza nuevamente, pero esta vez ya tienes datos en el scope para data.

Con respecto al select, se usa un nuevo Hook para definir la opción inicial y la función hanlder:

const [option, setOption] = React.useState("");

Luego, se decalara una constante mySelect para asignar la configuración del select, con su respectivo evento onChange; la función map crea dinámicamente las opciones del select, después se propagan con del operador elipsis (spread operator):

//prototipo select tag
const mySelect = <select onChange={onSelectOption} value={option || ''}>
                        {[...data.map((currentValue, index)=>(
                            <option value={currentValue} key={index}>
                            {currentValue}
                            </option>))
                         ]}
                  </select>;

Para la validación, puedes usar un operador ternario, para saber si el array data ya viene con datos o no. A continuación el componente completo:

function App(){
  const [data, setData] = React.useState([]);
  const [option, setOption] = React.useState("");
  //useEffect configurado para correr solo una vez
  React.useEffect(()=>{
    //tu código async
    const tArray = ["option1","option2","option3","option4"]
    setData(tArray)
  }, []);
  //handler select
  function onSelectOption(e){
    const option = e.target.value;
    setOption(option);
  }
  //prototipo select tag
  const mySelect = <select onChange={onSelectOption} value={option || ''}>
                        {[...data.map((currentValue, index)=>(
                        <option value={currentValue} key={index}>
                        {currentValue}
                        </option>))]}
                      </select>;
  //llega 0 en el primer render
  //llega con datos en el re-render, despues de setData
  console.log(data.length)
  //validas con Ternary Operator
  return (
  (data.length === 0) ? "loading..." : <div>{mySelect}</div>)
}


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>

La sintáxis del Ternary operator es:

condition ? expression1 : expression2

Así es como quedo implementado:

//reemplaza h3-expression2 por tu select
 (data.length === 0) ? "loading..." : <div>{mySelect}</div>

Espero que esta respuesta sea de ayuda.

3
  • muchisimas gracias , sabes que tuve muchos problemas con react-select y opte por hacerlo como lo has hecho tu, se me hizo mas practico manejar la informacion ... el react-select parece que me obligaba darle un atributo label a mis entidades para poder manejar los valores la verdad una lastima que tenga ese talon por que parece muy buena herramienta ... muchisimas gracias por tu ejemplo me sirvio para terminar mi componente y sacar dudas teoricas el 24 ene. 2021 a las 5:18
  • Que bien @gabrielcaballero, voy a revisar el react-select cuando pueda, yo tampoco lo he usado, si consideras que la respuesta fue de utilidad, no olvides votar y aceptarla, para que otros usuarios puedan usar el ejemplo, suerte y salud!
    – g.4
    el 24 ene. 2021 a las 6:45
  • Ya esta la respuesta como aceptada!, ahora para que ganes la medalla Apoyador y puntos, debes votar a favor, en la misma sección donde aceptaste, debes dar click en el icono up arrow (Esta respuesta es útil), saludos
    – g.4
    el 25 ene. 2021 a las 1:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.