Помогите, пожалуйста, отладить код...
Делаю такое приложение (см скриншот). При нажатии на кнопку "лень писать, зовите обезьян" в поле слева должны раз в пол секунды добавляться случайные символы (сейчас просто "а" вместо случайных) - как будто человек (или обезьяна) случайным образом бьёт по клавиатуре. Никак не получается это реализовать.
Приложение использует связку React18.2\Redux4.2
Я сделала компонент кнопки "лень писать зовите обезьян" так как показано ниже, но оно некорректно работает.
Сперва добавляется просто "a", а при повторном нажатии ещё одна "а" и вторая начинает мигать. Если нажимать ещё, то мигает быстрее.
Что нужно сделать, чтобы работало правильно?
import React, { useState, useEffect } from 'react';
import Button from 'react-bootstrap/Button';
import { changeUserText } from '../../store/TextSlice'
import { useAppSelector, useAppDispatch } from '../../store/Hooks'
const Laziness = () => {
const dispatch = useAppDispatch()
const [autotext, setAutotext] = useState(false);
const userText = useAppSelector(state => state.Text.userText)
useEffect(() => {
if (autotext) {
setInterval(()=>{
dispatch(changeUserText(userText + 'a'))
}, 500)
}
}, [autotext]);
const handleWriting = () => {
setAutotext(!autotext)
}
return (
<>
<Button
style={{"margin": "0px 0px 20px 10px"}}
variant="dark"
type="submit"
onClick={handleWriting}>
{autotext ? 'Остановите обезьян!' : 'Лень писать, зовите обезьян!'}
</Button>
</>
)
}
export default Laziness
Редьюсер выглядит так:
changeUserText: (state, action: PayloadAction<string>) => {
state.userText = action.payload
if (state.loadedText.length === 0) {
alert("Текст не загружен. Прежде чем начать, нажми «Загрузить текст» и напиши там что-нибудь.")
state.userText = ""
state.identicText = ""
}
if (state.userText.length > state.loadedText.length) {
state.counter = Math.floor((state.userText.length - 1) / state.loadedText.length)
} else {
state.counter = 0
}
state.pointer = state.userText.length - state.loadedText.length * state.counter - 1
const replaceAt = (str: string, index: number, replacement: string) => {
return str.substring(0, index) + replacement + str.substring(index + replacement.length);
}
let a = state.loadedText[state.pointer].toLowerCase()
let b = action.payload[action.payload.length - 1].toLowerCase()
if (
state.identicText[state.pointer] === "."
&& a === b
) {
state.identicText = replaceAt(state.identicText, state.pointer, state.loadedText[state.pointer])
}
}
Собственно большая часть кода в редьюсере нужна для обработки логики взаимодействия с правым полем, но для контекста его тоже решила добавить в вопрос.