Почему некоторые импортированные действия React-Native Redux меняют значения и запускают onEffects несколько раз?

Question

Вот мои настройки:

// store/actions/user.js

export const discoverFollowingStatus = followsId => {
  return (dispatch, getState) => {
    const userId = getState().user.user.id;
    findFollowingFromTo(userId, followsId).then(following => {
      dispatch({
        type: UPDATE_FOLLOWING_STATUS,
        payload: {
          followsId,
          following: following !== null,
        },
      });
    });
  };
};

// component.js

import {
  discoverFollowingStatus,
} from '../store/actions/user';
...
useEffect(() => {
    discoverFollowingStatus(followedUserId);
    console.log(discoverFollowingStatus);
  }, [followedUserId, discoverFollowingStatus]);

Консоль печатает множество функций, которые не группируются вместе:

Большая проблема в том, что экран постоянно перерисовывается, потому что срабатывает useEffect. Почему это импортировало постоянное изменение и вызвало его?

Answer 1

Проблема в том, что у вас есть два объекта / значения внутри [] в конце вашего useEffect. Это должно исправить это, если вы хотите продолжать наблюдать за этими двумя значениями.

import {
  discoverFollowingStatus,
} from '../store/actions/user';
...
useEffect(() => {
    if(followedUserId && discoverFollowingStatus){
    discoverFollowingStatus(followedUserId);
    console.log(discoverFollowingStatus);
    }
  }, [followedUserId, discoverFollowingStatus]);

Обратите внимание, что discoverFollowingStatus будет срабатывать только в том случае, если на этот раз определены и discoverFollowingStatus, и followedUserId.

В противном случае рекомендуется в документация , чтобы разделить ваш useEffect для разделения проблем. Вы должны использовать useEffect для установки состояния, когда followedUserId определено и безопасно для использования discoverFollowingStatus