reactjs - 我的 React 应用程序在 Chrome 中运行良好，但在 Firefox 中运行不佳

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)));

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

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

火狐错误:

Download the React DevTools for a better development experience

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Answer 1

This warning(s) usually shows up when this.setState() is called in a component even though the component got already unmounted.

卸载可能会在不同情况下发生:

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

When not rendering the component anymore, it can still happen that this.setState() is called if you have done asynchronous business logic in your component and updated the local state of the component afterward.

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

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