Почему моя кнопка срабатывает без щелчка в Rx Js fromEvent?

Question

У меня есть 2 вопроса об одном и том же.

Во-первых, это правильный способ отправки формы в Rx Js? Я пытаюсь подписаться на mouseEvent, и если это будет щелчок, он отправит POST-запрос к моему бэкэнду

, поэтому в ответ я делаю следующее:

useEffect(() => {
    const mouseClick$ = fromEvent(buttonEl.current, 'click').subscribe(console.log('hi123'))
})

консоль. В журнале я, в конце концов, выполню API POST. однако всякий раз, когда я перезагружаю свою страницу, она сразу же выходит из системы hi123, почему это так?

  <button ref={buttonEl}>
        Submit
    </button>

почему это происходит? Я надеялся, что подписки будут срабатывать только при нажатии (чего, кстати, на данный момент нет только при загрузке: /)

Answer 1

Потому что useEffect вызывается, когда ваш компонент монтируется и в вашем случае (потому что у вас нет массива зависимостей) для каждого обновления.

Вам не нужно useEffect для обработки формы, просто создайте обычную функцию, такую ​​как onSubmit и обработайте вашу форму там

Answer 2

Функция subscribe принимает функцию. Вы должны вызвать console.log() из функции.

По сути, вы передаете результат console.log(), который равен undefined.

useEffect(() => {
    const mouseClick$ = fromEvent(buttonEl.current, 
'click').subscribe(evt => console.log('hi123'))
    // Unsubscribe, when the conponent is unmounted:
    return () => mouseClick$.unsubscribe();
})