如何将响应从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>
  );
}

欢迎任何和所有的帮助。还想知道我是否需要有关于openai API调用的axios？

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>
</>
))}``