Question

我有一个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，那么它的值将变为“ undefined”，并且代码在firefox中失败。但这在chrome中也可以正常工作。

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

Firefox错误：

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

警告：无法在已卸载的组件上执行React状态更新。   这是空操作，但它表明应用程序中发生内存泄漏。   要修复，请取消所有订阅和异步任务   componentWillUnmount方法。

Answer 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函数的不同浏览器行为不同。尝试使用更多的跨浏览器功能。

我的React应用在Chrome中可以正常运行，但在Firefox中不能正常

1 个答案: