模块联合在远程反应应用程序中多次重新渲染组件

Question

我想将我的 RemoteApp 渲染到我的 ShellApp 中。我的 RemoteApp 有一个 useEffect 来进行 API 调用，但它似乎执行了很多次。 所以我想我的远程组件重新渲染的次数比应有的要多。

这些是我的 ShellApp 和 RemoteApp 的 webpack.config：

远程应用程序

const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const ESLintPlugin = require('eslint-webpack-plugin');

const deps = require('./package.json').dependencies;

module.exports = {
  output: {
    publicPath: 'http://localhost:3003/',
  },

  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js', '.json', '*'],
  },

  devServer: {
    port: 3003,
    historyApiFallback: true,
    hot: true,
  },

  module: {
    rules: [
      {
        test: /\.m?js/,
        type: 'javascript/auto',
        resolve: {
          fullySpecified: false,
        },
      },
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
      {
        test: /\.json$/,
        loader: 'json-loader',
      },
    ],
  },

  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      remotes: {},
      exposes: {
        './Dashboard': './src/pages/Dashboard/Dashboard.jsx',
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        'react-dom': {
          singleton: true,
          requiredVersion: deps['react-dom'],
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: './public/index.html',
    }),
    new webpack.HotModuleReplacementPlugin(),
    new ESLintPlugin({
      extensions: ['js', 'jsx'],
    }),
  ],
};

Shell 应用程序

const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const ESLintPlugin = require('eslint-webpack-plugin');

const deps = require('./package.json').dependencies;

module.exports = {
  output: {
    publicPath: 'http://localhost:3000/',
  },

  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js', '.json', '*'],
  },

  devServer: {
    port: 3000,
    historyApiFallback: true,
    hot: true,
  },

  module: {
    rules: [
      {
        test: /\.m?js/,
        type: 'javascript/auto',
        resolve: {
          fullySpecified: false,
        },
      },
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
      {
        test: /\.json$/,
        loader: 'json-loader',
      },
    ],
  },

  plugins: [
    new ModuleFederationPlugin({
      name: 'frontend_shell',
      filename: 'remoteEntry.js',
      remotes: {
        dashboard: 'frontend_equity_credit@http://localhost:3003/remoteEntry.js',
      },
      exposes: {},
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        'react-dom': {
          singleton: true,
          requiredVersion: deps['react-dom'],
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: './public/index.html',
    }),
    new webpack.HotModuleReplacementPlugin(),
    new ESLintPlugin({
      extensions: ['js', 'jsx'],
    }),
  ],
};

我正在 Shell App.jsx 中导入这样的远程组件

import Dashboard from 'dashboard/Dashboard';

function App() {

  return (
    <div>
      <Dashboard/>
    </div>
  );
}

最后，这是我的仪表板。远程应用程序中的 jsx 组件

import React, { useEffect } from 'react';
import { useStore } from './store/store';

function Dashboard() {
  const { globalStore, actions, dispatch } = useStore();
  const loggedUserId = globalStore.auth?.userInfo?.id;

  useEffect(() => {
    if (loggedUserId) {
      dispatch(actions.getUsersPreferences(loggedUserId)); //API CALL
    }
  }, [loggedUserId]);
  
  return (
    <>
      {/*render api response*/}
    </>
  );
}

export default Dashboard;

我在控制台中得到了这个：

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

有什么想法吗？