如何在bot中根据QnAMaker的提示显示多个按钮

import React, { useState } from 'react';

function BotChat() {
  const [answers, setAnswers] = useState([]); // 存储QnAMaker返回的答案提示

  // 处理QnAMaker返回的答案
  function handleQnAMakerResponse(response) {
    const qnaAnswers = response.answers; // QnAMaker返回的答案数组

    // 提取每个答案的提示信息
    const prompts = qnaAnswers.map(answer => answer.context.prompts);

    // 将提示信息转换为按钮组件
    const buttons = prompts.map(prompt => (
      <button key={prompt.displayText} onClick={() => handleButtonClick(prompt)}>
        {prompt.displayText}
      </button>
    ));

    setAnswers(buttons); // 更新按钮组件数组，触发界面更新
  }

  // 处理按钮点击事件
  function handleButtonClick(prompt) {
    // 执行与按钮关联的操作，例如显示答案或其他操作
    console.log(`执行操作: ${prompt.displayText}`);
  }

  // 发送问题到QnAMaker并处理返回的答案
  function sendQuestion(question) {
    // 发送问题到QnAMaker并处理返回的答案
    // ...

    // 假设返回的QnAMaker答案存储在response变量中
    handleQnAMakerResponse(response);
  }

  return (
    <div>
      {/* 显示答案按钮 */}
      {answers}

      {/* 输入框和发送按钮 */}
      <input type="text" />
      <button onClick={() => sendQuestion('问题')}>发送</button>
    </div>
  );
}

export default BotChat;