仅在 setState 完成后执行 function

Question

我在我的 React 应用程序中使用 openAi API 与 ChatGPT 对话，我想在我的消息异步添加到messages数组后将请求发送到 ChatGPT，有没有办法做到这一点？

function addMessage() {
  setMessages([...messages, { writer: "Me", text: "Hi ChatGPT, how are you ?" }]);

  // execute this after the asynchronous setState above is over
  getResponse();
}

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

Answer 1

如果您只是希望消息按顺序显示，则无需等待重新呈现。 即使响应立即通过（这不太可能），用户的消息仍会在响应消息附加到数组之前显示。

这是一个代码沙箱，展示了这一点。

请注意，您还应该使用setMessages的回调版本，因为您依赖于之前的 state -

const addMessage = (msg: string) => setMessages((prev) => [...prev, msg]);