Estoy tratando de completar mis opciones desplegables seleccionadas con valores que provienen de una llamada API tan pronto como se carga la página. Actualmente, las opciones solo se generan una vez que toca y anula la selección del campo de selección. Al cargar la página, las opciones no se llenan y están vacías. He analizado otras preguntas similares que sugieren usar el paquete React-select, pero estoy buscando una manera de hacerlo con solo reaccionar y no he tenido suerte para encontrar una solución. Por favor, indique cómo puedo lograr esto o dónde puedo obtener ayuda. He adjuntado mi código a continuación. Atentamente.
import { Form } from "react-bootstrap"; import { Field, ErrorMessage } from "formik"; import axios from "axios"; function CompanySelect(props) { const [options, setOptions] = useState([]); useEffect(() => { const opt = [ { key: "Select a company", value: "", }, ]; (async () => { const { data } = await axios.get("http://localhost:5000/api/company/"); data.forEach((value) => { opt.push({ key: value.name, value: value.id, }); }); })(); setOptions(opt); }, []); const { label, name, ...rest } = props; return ( <Form.Group className="mb-2"> <Form.Label htmlFor={name}>{label}</Form.Label> <Field id={name} name={name} {...rest} as={Form.Select}> {options.map((option) => { return ( <option key={option.value} value={option.value}> {option.key} </option> ); })} </Field> <ErrorMessage className="text-danger" name={name} component={Form.Text} /> </Form.Group> ); } export default CompanySelect;Está actualizando su estado en el momento equivocado, justo después de activar el axios.get asíncrono, pero antes de que lleguen los resultados . Entonces, cuando la actualización de estado realmente ocurre, opt aún no contiene los datos obtenidos de axios. Aquí está la versión fija:
import { Form } from "react-bootstrap"; import { Field, ErrorMessage } from "formik"; import axios from "axios"; function CompanySelect(props) { const [options, setOptions] = useState([]); useEffect(() => { async function fetchData() { // Fetch data const { data } = await axios.get("http://localhost:5000/api/company/"); const results = [] // Store results in the results array data.forEach((value) => { results.push({ key: value.name, value: value.id, }); }); // Update the options state setOptions([ {key: 'Select a company', value: ''}, ...results ]) } // Trigger the fetch fetchData(); }, []); const { label, name, ...rest } = props; return ( <Form.Group className="mb-2"> <Form.Label htmlFor={name}>{label}</Form.Label> <Field id={name} name={name} {...rest} as={Form.Select}> {options.map((option) => { return ( <option key={option.value} value={option.value}> {option.key} </option> ); })} </Field> <ErrorMessage className="text-danger" name={name} component={Form.Text} /> </Form.Group> ); } export default CompanySelect;