Tengo un componente que abre el cuadro de diálogo para proporcionar entradas:
function App() { const [toggle, setToggle] = useState(false); return ( <> <button onClick={setToggle(true)}>Show Dialog</button> </> ); } export default App;Este es el componente de diálogo que se abre:
function Dialog() { return ( <> <span> <div> Name: </div> <input type="text" /> </span> <span> <div> Select: </div> <SelectionBox/> </span> </> ); } export default Dialog;El código del componente del cuadro de selección es el siguiente:
function SelectionBox() { const [value, setValue] = useState(""); const [options, setOptions] = useState([]); const apiCalls = () => { service.getData1().then((data) => { service.getData2(data).then((opt) => { setOptions(opt); }).catch((e1) => { console.log(e1); }); }).catch((e) => { console.log(e); }); }; return ( <> <Select label="select" options={options} value={value} /> </> ); } export default SelectionBox;El componente del cuadro de selección llama a dos API para obtener y mostrar los datos en el cuadro de selección. Esta llamada a la API lleva tiempo y quiero llamar a la API solo una vez cuando abro el cuadro de diálogo y memorizo esa respuesta para otras acciones del cuadro de diálogo. Este cuadro de selección también se puede reutilizar en algún otro lugar y los datos serán los mismos en todos los lugares. ¿Cómo puedo conseguir esto?
PD: Quiero llamar a las API cuando se monta el componente. Además, no está abierto para usar ninguna biblioteca.
Puede hacerlo con la ayuda de useEffect y localStorage . En cada montaje, verifica si hay datos guardados dentro de localStorage , si es así, úselo, de lo contrario, llame a su API y almacene el resultado dentro localStorage . Algo así:
import { useEffect } from "react"; function SelectionBox() { const [value, setValue] = useState(""); const [options, setOptions] = useState([]); useEffect(() => { const apiCalls = () => { service.getData1().then((data) => { service .getData2(data) .then((opt) => { localStorage.setItem("options", JSON.stringify(opt)); setOptions(opt); }) .catch((e1) => { console.log(e1); }); }) .catch((e) => { console.log(e); }); }; let opt; try { opt = JSON.parse(localStorage.getItem("options")); } catch (error) { console.log(error) } if (!Array.isArray(opt)) { apiCalls(); } else { setOptions(opt); } }, []); return ( <> <Select label="select" options={options} value={value} /> </> ); } export default SelectionBox;