Estoy tratando de acceder a res.data.id desde una llamada axios.post anidada y asignarla a la variable 'activeId'. Estoy llamando a la función handleSaveAll() en un evento de clic de botón. Cuando se hace clic en el botón, cuando consuelo en 'res.data.Id', devuelve el valor correctamente, pero cuando consuelo en 'activeId', devuelve nulo, lo que significa que 'res.data.id' no se puede asignar . Solo necesito asignar el valor de 'res.data.id' a 'metricId' para poder usarlo en otro lugar en otra función como la función save2(). ¿Alguien tiene una solución? Gracias por adelantado
const [activeId, setActiveId] = useState(null); useEffect(() => {}, [activeId]); const save1 = () => { axios.get(api1, getDefaultHeaders()) .then(() => { const data = {item1: item1,}; axios.post(api2, data, getDefaultHeaders()).then((res) => { setActiveId(res.data.id); console.log(res.data.id); // result: eg 10 }); }); }; const save2 = () => { console.log(activeId); // result: null }; const handleSaveAll = () => { save1(); save2(); console.log(activeId); // result: again its still null }; return ( <button type='submit' onClick={handleSaveAll}>Save</button> );Esta parte del código ejecuta sincronización
const handleSaveAll = () => { save1(); save2(); console.log(activeId); // result: again its still null };pero ahí ejecutas asíncrono
axios.get(api1, getDefaultHeaders()) .then(() => {Puede refactorizar su código para sincronizar/esperar así:
const save1 = async () => { const response = await axios.get(api1, getDefaultHeaders()); const response2 = await axios.post(api2, { item1: response.data.item1 }, getDefaultHeaders()); return response2.data.id; }; const save2 = (activeId) => { console.log(activeId); // result: null }; const handleSaveAll = async () => { const activeId = await save1(); save2(activeId); setActiveId(activeId); console.log(activeId); // result: again its still null };o a cadena de promesas, así:
const save2 = (activeId) => { console.log(activeId); // result: null }; const save1 = () => { return axios.get(api1, getDefaultHeaders()) .then(({ data }) => { const data = {item1: item1,}; return axios.post(api2, {item1: data.item1}, getDefaultHeaders()) }) .then((res) => res.data.id); }; const handleSaveAll = () => { save1() .then((res) => { setActiveId(res.data.id); console.log(res.data.id); // result: eg 10 return res.data.id; }) .then(save2); };