No puedo descifrar por mi vida pasar los datos que obtuve de mi API al componente de lienzo. Me parece que donde los datos están disponibles en la función handleSubmit() está fuera del alcance del accesorio de lienzo. Agradezco cualquier ayuda. Gracias.
Tengo un selector de fecha que pasa el valor seleccionado como parámetro a la API. Los datos se obtienen muy bien. Puedo console.log . Iniciar sesión, pero parece que no puedo encontrar una manera de enviar los datos a mi componente de canvas .
import React, { useState, useEffect } from 'react' import Layout from '../components/layout' import Sidebar from '../components/sidebar' import DatePicker from 'react-datepicker' import Canvas from '../components/canvas' import 'react-datepicker/dist/react-datepicker.css' export default function Ground({ track }) { function epoch(date) { date = Date.parse(date) date = date / 1000 return date } const [startDate, setStartDate] = useState(new Date()) const rightThisSecond = Math.round(Date.now() / 1000) const beginDate = Math.round(Date.now(startDate) / 1000) const handleSubmit = async (e) => { e.preventDefault() // console.log(epoch(startDate)) const beginDate = epoch(startDate) // console.log(beginDate) // ... submit to API or something const res = await fetch( `/api/tracks/timeseries/${beginDate}/${rightThisSecond}` ) const track = await res.json() // console.log(track) } return ( <section> <h2>Layout Example (Ground)</h2> <form onSubmit={handleSubmit}> <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} /> <button type='submit'>Submit</button> </form> <section> <> <Canvas data={track} /> // doesn't seem to reach here. </> </section> </section> ) } Ground.getLayout = function getLayout(page) { return ( <Layout> <Sidebar /> {page} </Layout> ) }Su handleSubmit es async , por lo que const track = await res.json() se ejecutará correctamente, después de que el componente ya se haya procesado y nunca se usará.
Debe actualizar el estado después de que regresen sus datos para que el componente pueda volver a procesarse con los datos obtenidos, usando algo como setTrack(track) . Luego, en su componente, puede pasar los datos del estado.
Ejemplo:
const [track, setTrack] = useState() ... setTrack(await res.json()) ... <Canvas data={track} />