如何将API的响应保存到一个状态，以便我可以显示旧的搜索/响应?

Question

我想要做的是:首先，我想要显示从API接收到的响应(我可以这样做)，然后我想要显示来自先前调用API的先前提示和响应。

import { useEffect, useState } from "react";
import Navbar from "./components/navbar/Navbar";
import Form from "./components/form/Form";
import Ideas from "./pages/Ideas";
import "./app.scss";
const { Configuration, OpenAIApi } = require("openai");
export default function App() {

const [companyType, setCompanyType] = useState("");
const [prompt, setPrompt] = useState("");
const [response, setResponse] = useState("");
const [list, setList] = useState({});

useEffect(() => {
console.log("use effect ran");
}, []);
const configuration = new Configuration({
apiKey: process.env.REACT_APP_API_KEY,
});
const openai = new OpenAIApi(configuration);
const searchForProductIdeas = (event) => {
event.preventDefault();
openai
.createCompletion("text-davinci-002", {
prompt: `List new product ideas for a ${companyType} company.`,
temperature: 1,
max_tokens: 256,
top_p: 1,
frequency_penalty: 0,
presence_penalty: 0,
})
.then((response) => {

// creates a variable to store response in
const idea = response.data.choices[0].text;
//sets the prompt
setPrompt(`List new product ideas for a ${companyType} company.`);
//sets the response
setResponse(idea);
// set the previous prompts and responses
setList({...prompt, ...idea})
});
};
return (
<div className="app">
<Navbar />

<div>{prompt}</div>
<div>{response}</div>
<div>{list}</div>
</div>
);
}

欢迎所有人的帮助。也想知道我是否需要有axios的openai API调用?

Answer 1

您可能希望将前一个搜索项和结果对存储在一个数组中。当有新的请求时，将当前的prompt和response状态移动到list状态数组中。

的例子:

export default function App() {
const [companyType, setCompanyType] = useState("");
const [prompt, setPrompt] = useState("");
const [response, setResponse] = useState("");
const [list, setList] = useState([]); // <-- array
...
const searchForProductIdeas = (event) => {
event.preventDefault();
openai
.createCompletion("text-davinci-002", {
...
})
.then((response) => {
// creates a variable to store response in
const idea = response.data.choices[0].text;
//sets the prompt
setPrompt(`List new product ideas for a ${companyType} company.`);
//sets the response
setResponse(idea);
// set the previous prompts and responses
if (prompt && response) {
setList(list => [...list, { prompt, response }]); // <-- append into new array
}
});
};
return (
<div className="app">
<Navbar />

<div>{prompt}</div>
<div>{response}</div>
<div>
<ul>
<p>Previous prompts and responses</p>
{list.map(({ prompt, response }, i) => ( // <-- map previous entries
<li key={i}>
<p>{prompt}</p>
<p>{response}</p>
</li>
))}
</ul>
</div>
</div>
);
}

Answer 2

所以我假设当我看你的代码时，现在这行:

<div>{list}</div>

不工作，因为你的问题是我如何显示旧请求列表。

我要做的是将列表改为对象数组:

const [list, setList] = useState([]);

我将添加您的提示和响应作为一个对象在里面。

这一行的内容

const idea = response.data.choices[0].text;
const newPrompt = `List new product ideas for a ${companyType} company.`;
setPrompt(newPrompt);
setResponse(idea);
setList([
...list,
{ 
prompt: newPrompt
response: idea
}]);

要渲染它，你可以使用map函数:

{
list.map((item) => (
<>
<div> item.prompt </div
<div> item.response </div>
</>
))}``