为什么某些导入的 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 时才会被触发。

否则建议在documentation 中拆分您的 useEffect 以分离关注点。当followedUserId 被定义并且discoverFollowingStatus 可以安全使用时，您应该使用 useEffect 设置状态