React中如何在setMessages异步完成后调用OpenAI API获取ChatGPT响应？

在React中，setState是异步操作，直接在setMessages后调用getResponse会导致请求时用的还是旧的messages状态，也无法确保自己的消息已经更新到数组里。可以通过以下两种可靠方式实现需求：

方法一：使用useEffect监听消息数组变化 #

利用useEffect监听messages的更新，当检测到最后一条消息是自己发送的时，触发OpenAI请求。这是React函数组件中处理状态更新后副作用的标准做法。

修改后的代码示例：

import { useState, useEffect } from 'react';

function ChatComponent() {
  const [messages, setMessages] = useState([]);
  // 假设text和temp是已定义的变量
  const text = "Hi ChatGPT, how are you ?";
  const temp = 0.7;

  function addMessage() {
    // 用函数式更新确保拿到最新状态
    setMessages(prevMessages => [...prevMessages, { writer: "Me", text }]);
  }

  function getResponse() {
    getOpenAiCompletions(text, temp).then((response) => {
      // 同样用函数式更新添加ChatGPT的回复
      setMessages(prevMessages => [
        ...prevMessages,
        { writer: "ChatGPT", text: response.data.choices[0].text },
      ]);
    });
  }

  useEffect(() => {
    const lastMessage = messages[messages.length - 1];
    // 只在自己发送消息后触发请求
    if (lastMessage && lastMessage.writer === "Me") {
      getResponse();
    }
  }, [messages]); // 依赖messages数组，状态更新时触发

  // 组件渲染逻辑...
}

方法二：使用setState的回调函数（React 18需注意） #

函数组件的setState支持传入第二个回调参数，该回调会在状态更新完成后执行。但在React 18的严格模式下，这个回调可能会被执行两次（用于检测副作用），因此更推荐方法一。

示例代码：

function addMessage() {
  setMessages(
    prevMessages => [...prevMessages, { writer: "Me", text: "Hi ChatGPT, how are you ?" }],
    // 状态更新完成后执行请求
    () => getResponse()
  );
}

function getResponse() {
  getOpenAiCompletions(text, temp).then((response) => {
    setMessages(prevMessages => [
      ...prevMessages,
      { writer: "ChatGPT", text: response.data.choices[0].text },
    ]);
  });
}

关键注意点 #

• 无论用哪种方法，更新messages时都建议用函数式更新（setMessages(prev => ...)），确保拿到最新的状态值，避免异步更新导致的旧状态问题。
• 在getResponse中添加ChatGPT回复时，同样要使用函数式更新，防止覆盖未处理的状态。

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