En mi aplicación react js, uso react-select => library. https://react-select.com/home#getting-started
import "./styles.css"; import Select from 'react-select' import { useState, useEffect } from "react"; export default function App() { const [state, setState] = useState(); useEffect(() => { const response = fetch('https://jsonplaceholder.typicode.com/users') .then(response => response.json()) .then(json => setState(json?.map((i) => { return {label: i.name, value: i.name} }))) },[]) console.log(state?.[0]) return ( <div className="App"> <Select defaultValue={state?.[0]} //expect the first value that comes from back-end options={state} /> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); } ¿Cómo puede notar que configuré como valor inicial el primer valor que proviene de api defaultValue={state?.[0]} , pero el valor no aparece como valor predeterminado, incluso en el archivo console.log que aparece. Supongo que esto sucede debido a un valor undefined en el primer renderizado, ¿entonces en el primer state?.[0] no está definido, pero después de eso, el valor aparece en la consola. ¿Cómo obtener el valor inicial dentro de la selección?
demostración: https://codesandbox.io/s/hopeful-keldysh-6xynq?file=/src/App.js:0-705
Tiene razón en que useEffect realiza la llamada a la API después del primer procesamiento. En la mayoría de los casos, esto es algo bueno, ya que le permite representar contenido, como un control giratorio de carga, mientras espera que finalice la llamada a la API:
export default function App() { const [state, setState] = useState(); useEffect(() => { const response = fetch('https://jsonplaceholder.typicode.com/users') .then(response => response.json()) .then(json => setState(json?.map((i) => { return {label: i.name, value: i.name} }))) },[]) if (!state) { // you can display a loading spinner here if you want return null; } // Once we've reached this point on subsequent renders, state should be defined return ( <div className="App"> <Select defaultValue={state.[0]} //expect the first value that comes from back-end options={state} /> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); } También tenga en cuenta que debido a que está utilizando defaultValue , es esencial que haya definido el estado en el momento en que el componente Select se procesa/monta inicialmente, ya que los cambios posteriores que envíe a defaultValue no afectarán el valor actual (ya que el valor ya estaba "predeterminado " a indefinido).