Next.js中如何将handleSubmit内请求的API数据传递给Canvas组件

你遇到的问题本质是局部变量作用域和React状态管理的问题，你在handleSubmit函数内部拿到的请求结果是函数内部的局部变量，离开这个函数作用域就无法被访问，自然没法传递给组件。

修复方案 #

你只需要新增一个React状态来存储接口请求返回的数据，拿到结果后写入状态，再把状态传给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: initialTrack }) {
  function epoch(date) {
    date = Date.parse(date)
    date = date / 1000
    return date
  }

  const [startDate, setStartDate] = useState(new Date())
  // 新增状态存储请求返回的track数据
  const [trackData, setTrackData] = useState(initialTrack || null)
  const rightThisSecond = Math.round(Date.now() / 1000)
  const beginDate = Math.round(Date.now(startDate) / 1000)

  const handleSubmit = async (e) => {
    e.preventDefault()

    const beginDate = epoch(startDate)
    const res = await fetch(
      `/api/tracks/timeseries/${beginDate}/${rightThisSecond}`
    )
    const track = await res.json()
    // 将请求结果写入状态，会自动触发组件重新渲染
    setTrackData(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>
        {/* 加判断避免空数据传给组件报错，也可以自定义加载提示 */}
        {trackData ? <Canvas data={trackData} /> : <p>请选择日期提交查询</p>}
      </section>
    </section>
  )
}

Ground.getLayout = function getLayout(page) {
  return (
    <Layout>
      <Sidebar />
      {page}
    </Layout>
  )
}

内容的提问来源于stack exchange，提问作者rf guy