Почему мой RX JS epi c в бесконечном l oop на монтировании, но вызывается только один раз при нажатии кнопки? - PullRequest
Новая
       41

Почему мой RX JS epi c в бесконечном l oop на монтировании, но вызывается только один раз при нажатии кнопки?

0 голосов
/ 08 мая 2020

, пожалуйста, взгляните на этот код ниже

в основном то, что происходит, мое действие отправляется здесь: 

   useEffect(() => {
        fetchData()
        setLoaded(true)
    }, [])

но по какой-то причине это бесконечный цикл, и мое действие будет отправляться непрерывно 

export const fetchData = () => ({ type: 'GET_USER_DATA' })

, и это вызывает мои epi c

const getUserData = (action$, state$) =>
    action$.pipe(
        ofType('GET_USER_DATA'),
        mergeMap(
            (action) =>
                ajax
                    .getJSON(
                        `myurlishere`,
                    )
                    .pipe(map((response) => fetchUserFulfilled(response))),
        )
    )

, которые запускают это: 

const fetchUserFulfilled = (payload) => ({ type: 'GET_DATA_SUCCESS', data: payload })

этот код все работает, но постоянно вызывая его в бесконечном l oop

, однако, если я перенесу код из useEffect в вызов кнопки, например: 

 <button onClick={fetchData}>fetch</button>

, он вызовет его только один раз, то есть что я хочу

, но мне нужно, чтобы данные вызывались onmount. Итак, как мне это исправить?

обратите внимание, я пробовал добавлять разные вещи ко второму аргументу useEffect, но это не имело эффекта 

   useEffect(() => {
        fetchData()
        setLoaded(true)
    }, [user.id])

Ответы [ 2 ]

0 голосов
/ 08 мая 2020

это код, который теперь работает: 

export const getUserDataEpic = () => {
    return ajax
        .getJSON(myurl)
        .pipe(
            map((response) => fetchUserFulfilled(response)),
        )
}

Я знаю, что сейчас не слушаю запущенное действие, но почему это вызывает бесконечное l oop?

0 голосов
/ 08 мая 2020

Исходя исключительно из предоставленного кода, я не вижу никаких проблем. Моя интуиция предлагает несколько вариантов, хотя вы упомянули некоторые из них, я бы тройная проверка :

  1. Отсутствует массив зависимостей в качестве второго аргумента для useEffect, или вы используете переменную для него, но переменная имеет значение undefined, что будет иметь ту же проблему.
  2. Если вы используете зависимости useEffect, возможно, одна из них постоянно меняется по незнанию. например, объекты часто меняют идентичность между рендерами, {} !== {}
  3. Не показан код, который также отправляет одно и то же действие, и на самом деле useEffect запускается только один раз.
  4. Некоторые родительские объекты рендеринг одного из предков или этого компонента с помощью key={something}, и предоставленное значение изменяется при каждом рендеринге. Если это произойдет, компонент разрушается и воссоздается каждый раз с нуля.

Если вы на 100% уверены, вы предоставляете useEffect(work, []), пустой массив в качестве второго аргумента, но эффект проявляется в Подтверждено, что работа выполняется синхронно в бесконечном l oop, тогда вероятна четвертая возможность.

Если вы набрали эти примеры кода в вопросе вручную при публикации этого сообщения, не верьте, что вы их реализовали так же, как вы думаете, что делает ваше приложение. Тройная проверка. В идеале попросите кого-нибудь проверить, кто не писал код. Часто проблема заключается в том, что мы думаем, что мы сказали нашему коду делать не то, что мы на самом деле сказали ему делать. Если вы еще этого не сделали, лучше всего выполнить код с помощью отладчика, чтобы увидеть, что происходит.

Надеюсь, это поможет!

...