在使用react hot loader时,如何避免通过API调用重新运行useEffect?

我在用 react-hot-loader 在我的本地环境中开发我的React+Firebase应用程序。

对于没有API调用的基本组件,我可以立即看到更改(它只更新更改的部分)。但是当我设计一个组件的样式时,这个组件内部有一个API调用 useEffect 像下面的例子一样,它不断地重新运行所有东西(包括效果),我失去了当前状态。

我更改某些内容后的日志:

我不确定问题是否是因为 使用效果 或者API调用。

问题

我该怎么解决这个问题?比如,如果我更改标签的CSS颜色,我希望我的所有状态保持不变,只更新更改的部分。

例子:

所有组件。js

function ComponentWithAPICall() {

  const [loading,setLoading] = useState(true);
  const [dataFromAPI,setDataFromAPI] = useState(null);

  useEffect(()=>{

    // CALL API WAIT FOR RESULTS
    setDataFromAPI(result);
    setLoading(false);

  },[]);

  return(
    dataFromAPI &&
      <div>
        // WHATEVER
      </div>
  );
}

这是我目前的配置 反应热加载器 .我也在用 webpack 和 webpack-dev-server .

网页包。dev.js

  devServer: {
    contentBase: './public',
    compress: true,
    hot: true,
    historyApiFallback: true
  },

  plugins:[
    new webpack.HotModuleReplacementPlugin(),
    new webpack.HashedModuleIdsPlugin()
  ],

  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  }

应用程序。js

import { hot } from 'react-hot-loader/root';

// App component

export default hot(withRouter(App));    // I'M ALSO USING react-router