json - 如何将nextjs api创建的json数据发送到新路由？

Question

我是一个完全的 Web 开发菜鸟，而且我对 Javascript 也有点陌生。我正在尝试制作一个测验风格的网站，用户可以在其中输入他们不太擅长的主题和特定主题，然后他们会得到在我拥有的 flashcard.js 文件中呈现的练习问题。

为此，我在 nextjs 中编写了一个 api 来生成这些练习问题，我知道该 api 可以工作，因为我看到它打印出这些问题，但是我不知道如何将数据解析到 flashcard.js 文件中。

这就是我的 api 中的处理程序的样子:

import { Configuration, OpenAIApi } from 'openai';
import { NextApiRequest, NextApiResponse } from 'next';
import { NextResponse } from 'next/server';
import { useRouter } from 'next/router';


export default async function handler(req, res) {

    const { subject, topic, exam_board, qualification } = req.body;

    const questions = await generateQuestions(subject, exam_board, qualification, topic);

    console.log(questions);
    console.log()
  

    res.status(200).json({ questions });
     }
}

我想尝试使用 useRouter，但我无法在处理程序中使用它，因此对任何想法持开放态度。

我已经在这个问题上坚持了几个月了，所以我们将不胜感激。

Answer 1

我认为您可以做的是将结果存储在状态中。

您需要从 React 导入 useState。

import { useState } from 'React';

并像这样声明你的状态。

const [questions, setQuestions] = useState(<default-state-value>);

然后将其作为 props 传递给 flashcard.js 组件。您将需要导入该组件。

import FlashCard from '<path-to-flashcard.js>'

然后调用该组件并将问题状态作为 Prop 传递

<FlashCard questionsProp={questions} />

在该组件内，您可以使用条件渲染，以便当您的状态加载数据时，它将在 UI 中更新。