我的 React 应用程序在 Chrome 中运行良好，但在 Firefox 中无法运行答案

【问题标题】：My React app works fine in Chrome but not in firefox我的 React 应用程序在 Chrome 中运行良好，但在 Firefox 中无法运行
【发布时间】：2019-11-08 00:15:50
【问题描述】：

我有一个 react-redux 应用程序在 chrome 中运行良好，但在 Firefox 中显示空白屏幕。

对于网络选项卡中的相同请求，firefox 给出状态码 304，而在 chrome 中为 200。

由于我使用的是 redux 商店，所以我使用下面的代码来创建 redux 商店。

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer,composeEnhancers(applyMiddleware(thunk)));

如果我使用下面的代码来创建 composeEnhancers，那么它的值将变为“未定义”并且代码在 firefox 中失败。但这在 chrome 中也可以正常工作。

const composeEnhancers = process.env.NODE_ENV === 'development'? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ :null || compose;

Firefox 错误：

下载 React DevTools 以获得更好的开发体验

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，取消所有订阅和异步任务 componentWillUnmount 方法。

【问题讨论】：

你可以试试这个const composeEnhancers = process.env.NODE_ENV === 'development'? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ :compose;
你在componentWillUnmount中调用了异步请求吗？
从第二个错误开始，您似乎已经发送了一个异步请求，并且在它返回之前您的组件已被卸载，或者您已经注册了全局甚至监听器，例如窗口调整大小事件并且它们被触发并且之后组件已卸载
@ravibagul91 使用你提到的代码我得到“TypeError：composeEnhancers is not a function”
@MohammadRezaKhedri：我没有在 componentWillUnmount 中提出任何请求。我没有在代码的任何地方使用它

标签： reactjs react-redux

【解决方案1】：

这个警告通常在 this.setState() 被调用时出现一个组件，即使该组件已被卸载。

卸载可能发生在不同的情况下：

由于 React 的条件渲染，您不再渲染组件。
您可以使用 React Router 等库离开组件。

当不再渲染组件时，仍然会发生这种情况 this.setState() 如果你做了异步业务，就会被调用组件中的逻辑并更新组件的本地状态之后。

以下情况是最常见的原因：

您向 API 发出了异步请求，请求（例如 Promise）尚未解决，但您卸载了组件。
然后请求解析，调用 this.setState() 设置新状态，但它遇到了一个未安装的组件。
您的组件中有一个侦听器，但没有在 componentWillUnmount() 上删除它。 * 那么监听器可能会在组件卸载时触发。
您在组件中设置了一个间隔（例如 setInterval），并且在间隔内 this.setState() 被调用。
如果您忘记删除 componentWillUnmount() 上的时间间隔，您将再次更新已卸载组件的状态。

class News extends Component {
  _isMounted = false;

  constructor(props) {
    super(props);

    this.state = {
      news: [],
    };
  }

  componentDidMount() {
    this._isMounted = true;

    axios
      .get('https://hn.algolia.com/api/v1/search?query=react')
      .then(result => {
        if (this._isMounted) {
          this.setState({
            news: result.data.hits,
          });
        }
      });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  render() {
    ...
  }
}

尝试实施这种方法。

P.S：不同的浏览器对 .js 和 .css 函数的行为不同。尝试使用更多的跨浏览器功能。

【讨论】：