javascript - 使用 react-hot-loader 时如何避免使用 API 调用重新运行 useEffect？

Question

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

对于没有 API 调用的基本组件，我可以立即看到更改（它只更新更改的部分）。但是，当我在useEffect像下面的示例中设置具有 API 调用的组件时，它会不断重新运行所有内容（包括效果）并且我会丢失当前状态。

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

我不确定问题是由于useEffectAPI 调用还是 API 调用。

问题

我怎样才能解决这个问题？就像，如果我更改标签的 CSS 颜色，我希望我的所有状态保持不变并且只更新更改的部分。

例子：

ComponentWithApiCall.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>
  );
}

这是我当前的react-hot-loader. 我也在使用webpackand webpack-dev-server。

webpack.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

标签： javascriptreactjsreact-hookswebpack-dev-serverreact-hot-loader