Reactjs 预期状态与componentDidMount之前的已记忆状态匹配

升级

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

注意：我的代码没有使用

react css模块

，也没有使用

this.props=…

中建议的语法

这是我的代码（我已经缩小到了，可能在

onPropsChange

部分）

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

谢谢你的建议

-编辑-

已将问题缩小到：

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

---

。。。特别是

退货商店。订阅
部分。
不是meteorJS方面的专家，但我碰巧也有同样的问题。当您试图以react无法理解的特定方式更改react中的
状态时，通常会发生这种情况。比如说


类MyComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={count:0}；
}
componentDidMount（）{
//注意我是如何改变它的，
//不使用'this.setState'`
this.state={count:1}；
}
//....

在您的例子中，函数
onData（null，Store.getState（）.payment）；
似乎以某种方式更改了状态的
payment
属性，从而更改了警告

如果需要任何更新，请尝试用
this.setState（{payment:…}）
替换
onData
中的部件。
也许，这里的任何专家都可以建议替代代码来解决此问题？您找到解决方案了吗？