React中如何保存异步请求结果，触发事件后用于新异步请求？

问题分析 #

当前代码里gameState在play函数内部声明，每次用户提交输入都会重新初始化，导致count无法累加、状态无法保留。同时直接修改局部变量无法把状态传递到下一次查询，得用React的状态管理来解决这个问题。

解决方案 #

用React的useState钩子管理游戏状态，让状态在组件重渲染时持久化，每次GPT返回结果后通过状态更新函数修改状态，确保下一次查询能使用最新状态。

修改步骤 #

• 用useState初始化全局游戏状态，替代play函数内的局部gameState
• 将handleSubmit改为异步函数，确保能等待GPT接口的Promise结果
• 处理GPT返回结果时，用setGameState更新状态，而非直接修改对象
• 移除play函数内的局部状态声明，直接使用组件的状态变量

修改后的完整代码 #

import './App.css';
import React, { useState, useRef } from 'react';

const { OpenAI } = require('openai');
const openai = new OpenAI({ apiKey: '[myKey}' });

function App() {
  const inputRef = useRef();
  const people = ["Donald Trump", "Taylor Swift"];
  
  // 用useState初始化游戏状态
  const [gameState, setGameState] = useState({
    currentPerson: people[0],
    count: 0
  });

  // 异步处理提交事件
  const handleSubmit = async (event) => {
    event.preventDefault();
    const guess = inputRef.current.value;
    if (!guess) return;

    try {
      const completion = await openai.chat.completions.create({
        messages: [
          { 
            role: "system",
            content: "仅返回小写的true或false，判断这两个人是否相识" 
          },
          {
            role: "user",
            content: `${gameState.currentPerson}, ${guess}`
          },
        ],
        model: "gpt-4o",
      }); 

      const result = completion.choices[0].message.content.trim();
      if (result === "true") {
        if (guess === people[1]) {
          console.log("You Win!");
          setGameState(prev => ({ ...prev, count: prev.count + 1 }));
        } else {
          console.log("Correct");
          setGameState(prev => ({
            currentPerson: guess,
            count: prev.count + 1
          }));
        }
      } else {
        console.log("Wrong");
      }
    } catch (error) {
      console.error("调用GPT接口出错:", error);
    }
    
    // 清空输入框
    inputRef.current.value = '';
  }

  return ( 
    <form onSubmit={handleSubmit} >
      <label >
        Name:
        <input name="guessInput" type="text" ref={inputRef} />
      </label>
      <button type="submit">
        Submit
      </button>
      {/* 添加状态展示，方便调试和用户查看 */}
      <div>当前人物: {gameState.currentPerson}</div>
      <div>正确次数: {gameState.count}</div>
    </form>
  );
}

export default App;

关键说明 #

1. 状态持久化：useState的状态会在组件生命周期中保留，不会每次提交都重置
2. 异步处理：handleSubmit改为async函数，并用try/catch捕获接口调用可能的错误，避免未处理的Promise错误
3. 状态更新：使用函数式更新setGameState(prev => ...)确保基于最新状态修改，避免状态更新的竞态问题
4. 输入重置：提交后清空输入框，提升用户体验

内容的提问来源于stack exchange，提问作者Aug