Soy bastante nuevo en React y estoy creando una aplicación en la que tengo que llamar a una API dentro de la función de mapa o eso creo.
Primero, llamo a una API que devuelve una lista de elementos que se representan en forma de kendo como esta:
import { Form, Field, FormElement } from "@progress/kendo-react-form"; ... const [tempAtr, setTempAtr] = useState([]); ... const resAtr = await services.getTemplateSessionAtributi(sesijaV); setTempAtr(resAtr.data.rlista); //tempAtr is filled with a list of elements (attributes) ... {tempAtr.map((data) => <Field required={data.required=== 1 ? true : false} disabled={data.read_only === 1 ? true : false} name={data.name} component={ data.tpodatka_id === 1 ?Input: data.tpodatka_id === 2 ?Input: data.tpodatka_id === 3 ?DatePicker: data.tpodatka_id === 4 ?DropDownList: data.tpodatka_id === 5 ?TextArea : data.tpodatka_id === 6 ?DropDownList: data.tpodatka_id === 7 ?DropDownList: data.tpodatka_id === 8 ?MultiSelect: data.tpodatka_id === 9 ?MultiSelect: Input} label={data.name} data={ data.tpodatka_id === (4 || 6 || 7 || 8 || 9) ? **call an API and fetch data to fill the dropdown for that specific attribute id ** : null } textField={data.tpodatka_id === (4 || 6 || 7 || 8 || 9) ? "name" : null} dataItemKey={data.tpodatka_id === (4 || 6 || 7 || 8 || 9) ? "id" : null} />)}Entonces, en la sección de datos, debo llamar a una API con un attribut_id como parámetro para poder obtener valores desplegables para ese atributo y no sé cómo hacerlo. Puede haber 1, 5 o 15 atributos desplegables, por lo que lo único que se me ocurre es llamar a la API dentro de la función de mapa y asignar valores a su regreso.
ayudar a alguien?
La mejor opción es extraer el dropdown como un componente de reacción separado y hacer la llamada a la API en su useEffect . Puede pasar la id como accesorio. Ejemplo ( Codesandbox )
import React from "react"; import "./styles.css"; function YearDropDown(props) { const [loading, setLoading] = React.useState(true); const [items, setItems] = React.useState([]); const [value, setValue] = React.useState("2013"); const { drilldowns } = props; React.useEffect(() => { let unmounted = false; async function getCharacters() { const response = await fetch( `https://datausa.io/api/data?drilldowns=${drilldowns}&measures=Population` ); const body = await response.json(); if (!unmounted) { setItems(body.data.map(({ Year }) => ({ label: Year, value: Year }))); setLoading(false); } } getCharacters(); return () => { unmounted = true; }; }, [drilldowns]); return ( <select disabled={loading} value={value} onChange={(e) => setValue(e.currentTarget.value)} > {items.map(({ label, value }) => ( <option key={value} value={value}> {label} </option> ))} </select> ); } export default function App() { return ( <div className="App"> <YearDropDown drilldowns="Nation" /> </div> ); }