Note:上面代码改变了值 。
是由表单发送的问题 。这意味着你需要从你作为参数传入方法的表单输入中接收它 。要做到这一点，你将定义选项，然后使用传播操作符来创建一个完整的选项，其中包括：
// src/App.jsimport { Configuration, OpenAIApi } from 'openai';import FormSection from './components/FormSection';import AnswerSection from './components/AnswerSection';const App = () => {const configuration = new Configuration({apiKey: process.env.REACT_APP_OPENAI_API_KEY,});const openai = new OpenAIApi(configuration);const generateResponse = async (newQuestion, setNewQuestion) => {let options = {model: 'text-davinci-003',temperature: 0,max_tokens: 100,top_p: 1,frequency_penalty: 0.0,presence_penalty: 0.0,stop: ['/'],};let completeOptions = {...options,prompt: newQuestion,};};return (// Render FormSection and AnswerSection);};export default App;
在这一点上，剩下的就是通过方法向发送一个请求，以获得响应 。
// src/App.jsimport { Configuration, OpenAIApi } from 'openai';import FormSection from './components/FormSection';import AnswerSection from './components/AnswerSection';import { useState } from 'react';const App = () => {const configuration = new Configuration({apiKey: process.env.REACT_APP_OPENAI_API_KEY,});const openai = new OpenAIApi(configuration);const [storedValues, setStoredValues] = useState([]);const generateResponse = async (newQuestion, setNewQuestion) => {let options = {model: 'text-davinci-003',temperature: 0,max_tokens: 100,top_p: 1,frequency_penalty: 0.0,presence_penalty: 0.0,stop: ['/'],};let completeOptions = {...options,prompt: newQuestion,};const response = await openai.createCompletion(completeOptions);console.log(response.data.choices[0].text);};return (// Render FormSection and AnswerSection);};export default App;
在上面的代码中，答案的文字将显示在你的控制台 。请自由地通过提出任何问题来测试你的应用程序 。最后一步是创建一个保存问题和答案数组的状态，然后将这个数组作为一个道具发送到组件 。这就是App.js的最终代码的样子：
// src/App.jsimport { Configuration, OpenAIApi } from 'openai';import FormSection from './components/FormSection';import AnswerSection from './components/AnswerSection';import { useState } from 'react';const App = () => {const configuration = new Configuration({apiKey: process.env.REACT_APP_OPENAI_API_KEY,});const openai = new OpenAIApi(configuration);const [storedValues, setStoredValues] = useState([]);const generateResponse = async (newQuestion, setNewQuestion) => {let options = {model: 'text-davinci-003',temperature: 0,max_tokens: 100,top_p: 1,frequency_penalty: 0.0,presence_penalty: 0.0,stop: ['/'],};let completeOptions = {...options,prompt: newQuestion,};const response = await openai.createCompletion(completeOptions);if (response.data.choices) {setStoredValues([{question: newQuestion,answer: response.data.choices[0].text,},...storedValues,]);setNewQuestion('');}};return (ChatGPT CLONE I am an automated question and answer system, designed to assist youin finding relevant information. You are welcome to ask me anyqueries you may have, and I will do my utmost to offer you areliable response. Kindly keep in mind that I am a machine andoperate solely based on programmed algorithms.
);};export default App;
现在你可以编辑组件，让它从App.js接收props值，并使用 Map()方法查看数组：
// components/AnswerSection.jsxconst AnswerSection = ({ storedValues }) => {return (