React Js / Использовать логику эффектов - PullRequest
0 голосов
/ 05 февраля 2020

Здравствуйте, у меня есть чат-бот, и я использую useeffect в своем компоненте для отправки ответа от бота пользователю, но у меня возникает проблема, когда пользователь "flooda" пишет 3/5 раз подряд, и он быстро заканчивается не вводить условия моего использованияЭффект:

const Chat = () => {

const [text, setText] = useState('');
const [auxText, setAuxText] = useState('');
const { messages } = ChatReducer;
const [isTyping, setIsTyping] = useState(false);
const [waitResponse, setWaitResponse] = useState(false);

  const handleClick = () => {
    setAuxText(text);
    dispatch(sendMessage(text));
    setWaitResponse(true);
    setText('');
  };

  useEffect(() => {
    if (waitResponse) {
      setIsTyping(true);
      dispatch(botResponse(auxText));
    }
    const timeoutId = setTimeout(() => {
      setWaitResponse(false);
      setIsTyping(false);
    }, 3000);
  }, [waitResponse]);

return(

<Styled.ChatLog ref={messagesEndRef}>
        {messages.map((message, index) => (
          <>
            {message.text ? (
              <Styled.MessageFlexColumn ref={messagesEndRef} key={index}>
                {message.type === 'user' ? (
                  <UserText key={index}>{message.text}</UserText>
                ) : (
                  <BotText
                    key={index}
                    isTyping={isTyping && index === messages.length - 1}
                  >
                    {message.text}
                  </BotText>
                )}
              </Styled.MessageFlexColumn>
            ) : (
              ''
            )}
            <div ref={messagesEndRef} />
          </>
        ))}
      </Styled.ChatLog>
  );
};

и мой комп BotText:

const BotText = props => {
  const memoedText = useMemo(() => props.children, []);
  return (
    <>
      <Styled.MessageWrapper>
        <Styled.BotImg src={BotLogo} />
        <Styled.ChatMessage>
          <Styled.TypingWrapper show={props.isTyping}>
            <span></span>
            <span></span>
            <span></span>
          </Styled.TypingWrapper>
          {!props.isTyping && memoedText}
        </Styled.ChatMessage>
      </Styled.MessageWrapper>
    </>
  );
};

проблема:

enter image description here

Я знаю, что проблема связана с моей логикой состояния c и с тем, как я использовал свой эффект, но я не могу придумать, как ее решить

Я заметил, что когда я меняюсь мой пользовательский эффект не вводит мой первый, если:

if (waitResponse) {
setIsTyping (true);
dispatch (botResponse (auxText));
}

и если я отправляю сообщение до получения ответа, он не отправляет ответ, то есть он не вводит первый, если

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...