0

Помогите, пожалуйста, отладить код...

Делаю такое приложение (см скриншот). При нажатии на кнопку "лень писать, зовите обезьян" в поле слева должны раз в пол секунды добавляться случайные символы (сейчас просто "а" вместо случайных) - как будто человек (или обезьяна) случайным образом бьёт по клавиатуре. Никак не получается это реализовать.

скриншот

Приложение использует связку 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])
        }
    }

Собственно большая часть кода в редьюсере нужна для обработки логики взаимодействия с правым полем, но для контекста его тоже решила добавить в вопрос.

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.