Сделала голосовой калькулятор. Что передать в функцию объект new SpeechSynthesisUtterance(), чтобы озвучивалось текущее значение нажимаемой кнопки?

Question

[Olga]

Когда передаю в new SpeechSynthesisUtterance() просто строку - озвучивает верно. Когда передаю переменную - текущее значение из состояния - озвучивает с опозданием: сначала "0" - как значение по умолчанию, затем - предыдущую нажатую клавишу. Подскажите, пожалуйста, кто знает, заступорилась на одном месте уже давно... Наверняка что-то элементарное...

function App() {
  const [counts, setCounts] = React.useState('0'); // текущее значение
  ....

  const speak = () => {
    const unterance = new SpeechSynthesisUtterance(counts);
    speechSynthesis.speak(unterance);
  }; // обработчик голосового сопровождения

return(
....

 <Numbers data={counts} onClick={setCounts} onClickSpeak={speak}/>
          <Box display={'flex'}>
            <CountButton data={counts} expression={'+'} onClick={applyExpression} onClickSpeak={speak}/>
            <CountButton data={counts} expression={'-'} onClick={applyExpression} onClickSpeak={speak}/>
            <CountButton data={counts} expression={'*'} onClick={applyExpression} onClickSpeak={speak}/>
            <CountButton data={counts} expression={'/'} onClick={applyExpression} onClickSpeak={speak}/>
          </Box>
          <ResultButton onClick={finalResult} onClickSpeak={speak}/>
)

function CountButton(props) { // компонент кнопки
.....

return (
    <Button
      onClick={() => {
        props.onClick(props.data + props.expression);
        props.onClickSpeak(props.data);
      }});
....
};

Answer 1

[haiarha]

Колбек использует то значение стейта что было на момент создания колбека.

Соответственно хоть speak вызван после setCounts значение там предыдущее.

Есть два решения:
1. Не вызывать speak вручную по клику а добавить useEffect отслеживающий изменение count и вызвать speak в нем.
2. Вместо useState использовать useRef, тогда значение count.current будет всегда браться актуальное по ссылке

Upd.
Ещё можно передать аргументом в колбек speak что мы хотим озвучить. На мой взгляд это самое явное и прямолинейное решение

Comments

[Olga]

Спасибо огромное, Вы мне очень помогли