Приложение My React прекрасно работает в Chrome, но не в Firefox

Question

У меня есть приложениеact-redux, которое нормально работает в Chrome, но в Firefox оно показывает пустой экран.

Для того же запроса на вкладке сети Firefox дает код состояния 304, тогда как в Chrome это200.

Поскольку я использую хранилище избыточных данных, я использовал приведенный ниже код для создания хранилища избыточных данных.

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() {
    ...
  }
}

Попробуйте реализовать этот подход.

PS: разные браузеры ведут себя по-разному для функций .js и .css.Попробуйте использовать больше кросс-браузерных функций.