Child 重新渲染和获取 API 两次

Question

我在使用 React(18.2.0) 的 NextJs(13.0.4) 中处理的应用程序有问题

我有一个父组件，这个组件只渲染一次。在 useEffect 的帮助下，我还检查了 selectedTab 是否正在改变。

const OrganizationForms = ({ selectedTab }: { selectedTab: string }) => {
  return selectedTab === 'Members' && <Members /> ||
    selectedTab === 'Invites' && <Invites /> ||
    selectedTab === 'Roles & Permissions' && <RolesAndPermissions /> ||
    <div>Not Found</div>;
};

问题进入它的孩子

function Invites() {

  console.log('component mounted');
  const { organization, invites } = useSelector(
    (state: RootState) => state.organization,
  ) as {
    organization: OrganizationStateDto;
    invites: OrganizationInvitesStateDto;
  };
  const dispatch = useDispatch();

  const {
    data,
    hasLoaded,
    loading,
    page,
    total,
  } = invites;

  const [isInviteEditFormOpen, setIsInviteEditFormOpen] = useState<string | boolean>(false);

  useEffect(() => {
    organization?.data?._id &&
    organizationInvitesActions.getInvites(
      organization?.data?._id,
      false,
    )(dispatch);
  }, []);

  return <div></div>;
}

这个函数的console.log记录了两次或三次。 useEffect 被调用了两次。 我尝试使用 useMemo、useCallback 来解决它。

到目前为止，我已经尝试隔离子组件。

我用过useCallback

const fetchList = useCallback(() => {
  organization?.data?._id &&
    organizationInvitesActions.getInvites(
      organization?.data?._id,
      false,
    )(dispatch);
}, [dispatch, organization?.data?._id]);

useEffect(() => {
  console.log('useEffect called');
  fetchList();
}, [fetchList]);

但到目前为止没有任何帮助