From 40db488b4052b7ad02c0ceede8c751a7396ab6f8 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Thu, 24 Feb 2022 00:20:48 -0500 Subject: [PATCH] fixup bug --- .../event_response_builder/TtsSingleVoiceForm.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/storyteller/src/pages/tts_configs/event_response_builder/TtsSingleVoiceForm.tsx b/packages/storyteller/src/pages/tts_configs/event_response_builder/TtsSingleVoiceForm.tsx index bf38b1454c..a87cdbfdbb 100644 --- a/packages/storyteller/src/pages/tts_configs/event_response_builder/TtsSingleVoiceForm.tsx +++ b/packages/storyteller/src/pages/tts_configs/event_response_builder/TtsSingleVoiceForm.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { TtsModelListItem } from '@storyteller/components/src/api/tts/ListTtsModels'; import { FakeYouExternalLink } from '@storyteller/components/src/elements/FakeYouExternalLink'; @@ -13,7 +13,16 @@ interface TtsSingleVoiceFormProps { }; function TtsSingleVoiceForm(props: TtsSingleVoiceFormProps) { - const [ttsModelToken, setTtsModelToken] = useState(props.ttsModelToken); + const [ttsModelToken, setTtsModelToken] = useState(''); + + // NB: useState is not always setting from props correctly (after several re-renders) + // The following answers suggests using useEffect: + // https://stackoverflow.com/a/54866051 (less clear by also using useState(), but good comments) + // https://stackoverflow.com/a/62982753 + useEffect(() => { + setTtsModelToken(props.ttsModelToken); + }, [props.ttsModelToken]); + const handleModelSelect = (ev: React.FormEvent) : boolean => { const value = (ev.target as HTMLSelectElement).value;