Tengo este código en la aplicación de reacción:
function xyz (callback) { axios.get(`https://example.com`) .then(res => { const filepath = res.data.Items[0].filepath.S callback ({autoplay: false, controls: true,sources: [{src: filepath}]}) }).catch(err =>{ console.log(err); }) } function App() { return ( <VideoPlayer { ...xyz(function(response) {console.log(response)});} /> ) }Esto funciona como se esperaba y puedo registrar la respuesta. Pero lo que intento hacer es asignar la respuesta de la función xyz directamente dentro de las etiquetas de VideoPlayer.
Por ejemplo, lo que quiero lograr es:
<VideoPlayer {...return-value-of-xyz-function}
¿Cómo logro esto? Feliz de proporcionar más contexto si es necesario. ¡Gracias!
Las funciones de renderizado siempre son síncronas. Debido a que su función xyz es asíncrona, debe lidiar con todo el estado intermedio: carga, error, sin datos, etc.
Recomiendo crear un gancho para este tipo de cosas, de esa manera puedes establecer un patrón y reutilizarlo en tu aplicación. O puede tomar el código del gancho y ponerlo directamente en la función de su App ; depende de usted.
const useFetchData = (url) => { const [state, setState] = useState({ isLoading: true, error: null, data: null }); useEffect(() => { axios.get(url) .then((res) => { setState({ isLoading: false, data: res.data, error: null }); }) .catch((error) => { setState({ isLoading: false, data: null, error }); }); }, [url]); return state; }; const App = () => { const { isLoading, data, error } = useFetchData("https://example.com"); if (isLoading) return <div>Loading...</div>; if (error) return <div>There was an error: {error}</div>; return <VideoPlayer {...data} />; };