nextjs 向组件传递数据

Question

我终其一生都无法将我从 API 获取的数据传递给画布组件。在我看来，handleSubmit() 函数中的数据可用，它超出了 canvas 属性的范围。我很感激任何帮助。谢谢。

我有一个日期选择器，它将所选值作为参数传递给 API。数据被提取得很好。我可以console.log 它，但我似乎找不到将数据发送到我的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>
  )
}

Answer 1

您的handleSubmit 是async，所以const track = await res.json() 将执行得很好，在组件已经渲染并且永远不会被使用之后。

您需要在数据返回后更新状态，以便组件可以使用获取的数据重新呈现，使用类似setTrack(track) 的内容。然后在您的组件中，您可以从状态中传递数据。

例子：

const [track, setTrack] = useState()

...

setTrack(await res.json())

...

<Canvas data={track} />