javascript - 为什么一些导入的 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 来设置状态