Ожидаемое состояние, чтобы соответствовать запомненному состоянию перед componentDidMount - PullRequest
Новая
       12

Ожидаемое состояние, чтобы соответствовать запомненному состоянию перед componentDidMount

0 голосов
/ 21 февраля 2020

Обновление meteor (с 1.4 до 1.7) и react (с 15.3.2 до 16.8.6) и получение этого предупреждения на консоли браузера: 

Warning: Expected Container(Container(withRouter(List))) state to match memoized state before componentDidMount. This might either be because of a bug in React, or because a component reassigns its own `this.props`. Please file an issue.
    in Container(Container(withRouter(List))) (created by UseDeps(Container(Container(withRouter(List)))))
    in UseDeps(Container(Container(withRouter(List)))) (created by RouterContext)
    in div (created by Layout)
    in div (created by Content)
    in Content (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in MDLComponent (created by Layout)
    in Layout (created by Layout)
    in Layout (created by WithDeps(Layout))
    in WithDeps(Layout) (created by RouterContext)
    in RouterContext (created by Router)
    in Router
    in Provider
    in Unknown

Примечание. Мои коды t с использованием react-css-modules или с синтаксисом this.props = ..., как предлагается в https://github.com/facebook/react/issues/14224

Вот мой код (к которому я сузился, вероятно, на onPropsChange части)

список. js

import {useDeps, composeAll, compose} from 'mantra-core-extra';
import composeWithTracker from '../../core/libs/utils/compose-with-tracker';

import List from '../components/list.jsx';

import Tickets from '../../../../lib/collections';

const composer = ({context}, onData) => {
  const {Meteor, Store} = context();
  if (Meteor.subscribe('tickets').ready()) {
    let filters = Object.assign({}, Store.getState().tickets.list.filters);
    if (filters.date) {
      filters['createdAt'] = {$gt: filters.date.range.start, $lt: filters.date.range.end};
      delete filters['date'];
    }

    let total = Tickets.find(filters).count();
    const tickets = Tickets.find(filters, {
      sort: {[Store.getState().tickets.list.sort.field]: Store.getState().tickets.list.sort.order ? 1 : -1},
      skip: Store.getState().tickets.list.page * Store.getState().tickets.list.range,
      limit: Store.getState().tickets.list.range,
    }).fetch();
    onData(null, {tickets, total});
  }
};

const onPropsChange = ({context}, onData) => {
  const {Store} = context();
  onData(null, Store.getState().tickets);
  return Store.subscribe(() => {
    onData(null, Store.getState().tickets);
  });
};

const depsMapper = (context, actions) => ({
  select: actions.ticket.select,
  unselect: actions.ticket.unselect,
  remove: actions.ticket.remove,
  changePage: actions.ticket.changePage,
  sortField: actions.ticket.sort,
  changeCategory: actions.ticket.changeCategory,
  changeStatus: actions.ticket.changeStatus,
  changeDate: actions.ticket.changeDate,
  find: actions.ticket.find,
  context: () => context
});

export default composeAll(
  composeWithTracker(composer),
  compose(onPropsChange),
  useDeps(depsMapper)
)(List);

Спасибо за любые советы.

- РЕДАКТИРОВАТЬ -

Сузили проблему до: 

const onPropsChange = ({context}, onData) => {
  const {Store} = context();
  onData(null, Store.getState().payment);
  return Store.subscribe(() => {
    onData(null, Store.getState().payment);
  });
};

... особенно часть return Store.subscribe.

...