Skip to content

Expected state to match memoized state before componentDidMount #18090

@padlock98

Description

@padlock98

Upgrading meteor (from 1.4 to 1.7) and react (from 15.3.2 to 16.8.6) and got this warning at browser console:

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

Note: My codes ain't using react-css-modules or having this.props = ... syntax as suggested in #14224

React version: 16.8.6

Steps To Reproduce

Here is my code (which I have narrowed down to, likely at onPropsChange part)

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

The current behavior

Causing table listing not appearing in my case.

The expected behavior

Table with rows of data to be listed

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: UnconfirmedA potential issue that we haven't yet confirmed as a bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions