Quiero mostrar datos en la lista desplegable de opciones seleccionadas usando AXIOS. Pero cuando consumo datos de la API, giran continuamente en un bucle infinito y no muestran datos en la API. Estoy usando un componente funcional para esto.
Los datos de la API se muestran en el siguiente formato:
{ "status": 1, "data": [ { "_id": "62982a3d8779cc4a00139ca0", "name": "List Category", "status": true, "createdAt": "2022-06-02T03:10:53.326Z", "updatedAt": "2022-06-02T03:10:53.326Z", "__v": 0 }, { "_id": "62984a1f3cb4c9170532736b", "name": "Event Name", "status": true, "createdAt": "2022-06-02T05:26:55.282Z", "updatedAt": "2022-06-02T05:26:55.282Z", "__v": 0 } ], "message": "List categories list." }Código de reacción:
const handleInputChange = (value) => { setValue(value); }; // handle selection const handleChange = (value) => { // setSelectedValue(value); }; const fetchData = () => { axios .get('http://localhost:5080/list-categories') .then((response) => { const { data } = response; const arrayOfObj = Object.entries(data).map((e) => ({ [e[0]]: e[1] })); let tempArray = arrayOfObj.map((item, index) => { item.label = item.name; item.value = item.name; item.id = item.id; return item; }); setSelectedValue(tempArray); }) .catch((error) => console.log(error)); }; fetchData(); <select disabled={false} value={selectedValue} onChange={(e) => setSelectedValue(e.currentTarget.value)} > {selectedValue.map(({ label, value }) => ( <option key={value} value={value}> {label} </option> ))} </select>;Cuando ejecuto este código, se ejecuta en un bucle infinito y no muestra ningún valor en el menú desplegable. Solo quiero mostrar datos en la lista desplegable usando API. Pero este código no funciona. Por favor, ayúdame a solucionarlo. Soy nuevo en reaccionar. Creo que tengo un problema en el bucle. Compruébalo. Quiero mostrar datos en la lista desplegable de opciones seleccionadas usando AXIOS
Intente anidar su llamada fetchData en una llamada gancho useEffect para evitar el bucle:
useEffect(() => { const fetchData = () => { axios .get('http://localhost:5080/list-categories') .then((response) => { const { data } = response; const arrayOfObj = Object.entries(data).map((e) => ({ [e[0]]: e[1] })); let tempArray = arrayOfObj.map((item, index) => { item.label = item.name; item.value = item.name; item.id = item.id; return item; }); setSelectedValue(tempArray); }) .catch((error) => console.log(error)); }; fetchData(); }, []);Además, intente agregar una verificación condicional para esperar a que se carguen los datos:
<select disabled={false} value={selectedValue} onChange={(e) => setSelectedValue(e.currentTarget.value)} > {!selectedValue ? ( <>Loading data...</> ) : selectedValue.length === 0 ? ( <>No data found</> ) : ( selectedValue.map(({ label, value }) => ( <option key={value} value={value}> {label} </option> )) )} </select>;intente una llamada api como algo dentro de useEffect of react y use variables de estado almacene variables en react
y tu código se vuelve como
import React, { useEffect, useState } from 'react'; function app(props) { const [select, setSelected] = useState(''); const [optionList,setOptionList] = useState([]); const fetchData = () => { axios .get('http://localhost:5080/list-categories') .then((response) => { const { data } = response; if(response.status === 200){ //check the api call is success by stats code 200,201 ...etc setOptionList(data) }else{ //error handle section } }) .catch((error) => console.log(error)); }; useEffect(()=>{ fetchData(); },[]) return ( <select disabled={false} value={select} onChange={(e) => setSelected(e.currentTarget.value)} > {optionList.map((item) => ( <option key={item._id} value={item.name}> {label.name} </option> ))} </select> ); } export default app;