SkyeBoniwell:
Estoy intentando devolver datos de una función, pero me está dando problemas.
Necesito esta función para volver JSON, pero se está volviendo una promesa.
Esta es la función:
import axios from 'axios';
const fetchData = async () => {
const result = await axios(
'https://localhost:44376/api/parts',
);
return JSON.stringify(result, null, 2);
};
export default fetchData;
Se está lanzando este error cuando trato de utilizar los datos devueltos:
Uncaught TypeError: data.map no es una función
Cuando escribo en la consola, esto es lo que veo:
data from machineParts API call:
Promise {<pending>}
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: {"data": [ { "id": 5, "title": "Steel Rods", "partId": 39482 etc...
Pero esto es lo que se necesita devolver:
data from machineParts API call: (7) [ {...}, {...}, {...}, {...}, {...}, {...}, {...}]
0:
id: 5
title: "Steel Rods"
partId: 39482
1:
id: 23
title: "Honed Cylinder head"
partId: 23412
etc ...
¿Hay alguna forma de convertir una promesa a una matriz JSON?
¡Gracias!
awran5:
Lo que desea llamar .then()
después de llamar a fetchData
la función:
// fetchData.js
import axios from "axios";
const fetchData = async () => {
const result = await axios(
'https://localhost:44376/api/parts',
);
// return the result
return result;
};
export default fetchData;
Ahora importarlo dentro de su componente de este modo:
// App.js
import fetchData from './fetchData' // fetchData path
const App = () => {
const [data, setData] = React.useState([])
React.useEffect(() => {
fetchData().then(res => {
setData(res.data)
})
},[])
return (
<div>
<pre>
<code> {JSON.stringify(data, null, 2)} </code>
</pre>
</div>
)
}
export default App
Ver caja de arena ejemplo.