ChatGPTからのレスポンスを画面に表示させたい。

Question

実現したいこと

chatGPTのレスポンスを画面に表示させたいです。

前提

TypeScript、Reactを使って勉強がてらwebアプリを作っています。
ChatGPTからの応答を画面上に表示させようとしたところ、画面に表示されませんでした。同期処理、非同期処理ができていないことは想像できるのですが、画面上に表示させるためにはどうすれば良いかわかりませんでしたので、ご教示お願いいたします。

該当のソースコード

export function useTextInput() {
    const [inputText, setInputText] = useState("どのようなドキュメンテーションを打ちますか？")
    const [answer, setAnswer] = useState<null | string>("")

    async function handleSubmitBtn() {
        try {
            const response = await openai.chat.completions.create({
                messages: [{ role: "system", content: inputText }],
                model: "gpt-3.5-turbo"
            })
            if (response.choices[0] && response.choices[0].message) {
                setAnswer(response.choices[0].message.content)
                console.log(response.choices[0].message.content)
            }
        } catch (error) {
            console.error("Error fetching response: ", error)
        }
    }
    return { inputText, answer, handleSubmitBtn, setInputText }
}





export function Output() {
  const textHooks = useTextInput()


  return (
    <Text
      mt="-60px"
      color="white"
      p="30px"
      fontWeight="bold"
      fontSize="16px"
    >
      {textHooks.answer}
    </Text>
  )
}



export function TextInput() {

  const textHooks = useTextInput();
  return (
    <div>
      <Textarea
        w="40vw"
        placeholder="メッセージを入力してください..."
        size="lg"
        p={5}
        borderRadius="2xl" // 丸みを帯びた角
        boxShadow="md" // 中程度の影
        borderColor="transparent" // ボーダーを透明に
        resize="none" // リサイズ不可
        focusBorderColor="green.500" // フォーカス時のボーダーカラー
        bg="white" // 背景色
        color="green.800" // テキストカラー
        fontWeight="bold"
        fontSize="16px" // フォントサイズ
        lineHeight="tall" // テキストの行間
        value={textHooks.inputText}
        onChange={(e) => textHooks.setInputText(e.target.value)}
      />
      <Flex mt="15px">
        <TextResetButton />
        <Spacer/>
        <TextSubmitBtn
          handleSubmitBtn={textHooks.handleSubmitBtn}
        />
      </Flex>
    </div>
  )
}

試したこと

console.log(response.choices[0].message.content)を使い、コンソール画面に表示されることは確認した。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[hoshi-takanori]

そもそも handleSubmitBtn が呼ばれてませんね…。

[saitoT]

すみません、ここにはコードを書いていませんでしたが、handleSubmitBtnは呼び出しています。呼びされた際に、console.logに表示できるようにしていました。説明不足で申し訳ございません。改めて該当コードを追加いたします。

[hoshi-takanori]

「 4-3. 同じカスタムフックを使っても state は別々」あたりをどうぞ。
https://zenn.dev/luvmini511/articles/df410f137d1e21

[saitoT]

ご連絡遅れてしまいました。ありがとうございます!!stateを完璧に忘れておりました。無事解決いたしました。

Answer 1

stateの状態管理を忘れていた。