如何将nextjs API创建的json数据发送到新路由?

3j86kqsm  于 2023-05-28  发布在  其他
关注(0)|答案(1)|浏览(134)

我是一个完整的Web开发新手,我也是一个新的Javascript。我正试图使一个quizlet风格的网站,用户可以输入的主题和特定的主题,他们不是很好,然后他们得到的实践问题回到一个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,但我不能在处理程序中使用它,因此可以接受任何想法。
我已经被困在这几个月,所以任何帮助将不胜感激。

wribegjk

wribegjk1#

我认为你可以做的是将结果存储在state中。
你需要从React中导入useState

import { useState } from 'React';

像这样宣布你的状态。

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

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

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

然后调用该组件并将questions状态作为属性传递

<FlashCard questionsProp={questions} />

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

相关问题