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.
log
vieneundefined
pues estas iniciando el estado de la variabledata
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 paradata
, 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, saludosselect
, avísanos si tienes dudas o si lograste avanzar, saludos