Parece que no puedo devolver el valor de esta llamada API en javascript a mi componente de reacción. Tengo un archivo de script Java que llama a una API. En el archivo js, se devuelven los resultados, pero cuando llamo a la función js en useEffect en mi componente de reacción, devuelve undefined.
export function ordersData() { const partner_code = localStorage.getItem('partner_code') let items = [] let data = [] let isLoaded = false let error = '' fetch('xxxxxxxxxxxx' + process.env.REACT_API) .then(res => res.json()) .then((result) => { for (let instance in result['docs']) { let payload = (result['docs'][instance]) payload.id = instance payload.timestamp = shortMonthYear(payload.timestamp) data.push(payload) } items = data.reverse() }, (err) => { isLoaded(true) error(err) }) }Aquí está mi componente rect
función predeterminada de exportación OrdersChart() {
const [payload, setPayload] = useState([]) const [error, setError] = useState(null); const [isLoaded, setIsLoaded] = useState(false); const [items, setItems] = useState([]); useEffect(() => { setPayload = ordersData() console.log(payload) }, [])........
La carga útil variable está vacía.
Debe usar ganchos React para llamadas API y almacenar los datos. Puede usar ganchos useEffect para llamar a la API y usar useState para almacenar datos en el estado.
const { useState } = React; function useFetchData() { const [loading, setLoading] = React.useState([]); const [data, setData] = React.useState([]); React.useEffect(() => { setLoading(true); fetch("https://randomuser.me/api/?results=10") .then((response) => response.json()) .then((responseJson) => { setData(responseJson.results); setLoading(false); }) .catch((error) => { console.error(error); setLoading(false); }); }, []); return { loading, data }; } function App() { const { loading, data } = useFetchData(); if(loading){ return <p>Loading... </p> } return ( <div> {data.map((item) => ( <div>{item.name.first}</div> ))} </div> ); } ReactDOM.render( <App />, document.getElementById('root') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root"></div>La forma más limpia que encontré fue esta
Cambiar el componente principal a este
useEffect(() => { newFunctionName(); }, []) async function newFunctionName(){ const response = await ordersData(); console.log(response) // you can then set all your states directly in here }Cambie el componente de llamada api a esto.
export default async function ordersData() { try{ const res = await fetch('xxxxxxxxxxxx' + process.env.REACT_API) return res } catch(err){ console.log(err) return(err) } }Ahora tiene la respuesta en el componente principal y puede establecer estados desde allí.
No devuelves nada en esta función. Simplemente inserta el valor de la carga útil en los datos, que es una variable local. Puede usar el estado y establecer el valor mediante setState.