React警告:ReactMount:根元素已从其原始容器中删除.新容器:[object HTMLDivElement]

我得到错误

警告：ReactMount:根元素已从其原始容器中删除。新容器：[object HTMLDivElement]

似乎有什么东西正在替换DOM节点？但不确定错误在哪里。我不会在任何我能看到的地方设置innerHTML。。。

代码（GitHub）

我在添加费用时出现此错误。我认为可能会在下面重新发布代码：

container/addExpenseDialog.jsx（其中调度addExpense操作）

import {connect} from 'react-redux';
import AddExpenseDialogPresentation from '../presentation/expenseDialog.jsx';
import {closeDialog, addExpense} from '../../actions/index.js';
const mapStateToProps = (state) => {
  return {
    opened: state.expenseDialog
  };
}
const mapDispatchToProps = (dispatch) => {
  return {
    doClose: () => dispatch(closeDialog()),
    // I dispatch addExpense here
    doAdd: (params) => dispatch(addExpense(params)),
  };
}
const AddExpenseDialog = connect(
  mapStateToProps,
  mapDispatchToProps
)(AddExpenseDialogPresentation);
export default AddExpenseDialog;

actions/index.js

export const addExpense = (expense) => {
  return Object.assign({}, expense, {
    type: 'ADD_EXPENSE'
  });
};

减员/费用.js

let id = 1;
const expense = (state, action) => {
  switch (action.type) {
    case 'ADD_EXPENSE':
      return {
        id: id++,
        name: action.name,
        category: action.category,
        cost: action.cost
      }
    default:
      return state;
  }
};
const expenses = (state = [], action) => {
  switch (action.type) {
    case 'ADD_EXPENSE':
      return [
        ...state,
        expense(undefined, action)
      ];
    default:
      return state;
  }
};
export default expenses;

容器/费用List.jsx

import {connect} from 'react-redux';
import ExpensesListPresentation from '../presentation/expensesList.jsx';
const mapStateToProps = (state) => {
  return {
    expenses: state.expenses
  };
}
const mapDispatchToProps = (dispatch) => {
  return {};
}
const ExpensesList = connect(
  mapStateToProps,
  mapDispatchToProps
)(ExpensesListPresentation);
export default ExpensesList;

presentation/expensesList.jsx

import React from 'react';
import Expense from './expense.jsx';
import {DataTable} from 'react-mdl';
import {TableHeader} from 'react-mdl/lib/DataTable';
const ExpensesList = ({expenses}) => (
  <DataTable rows={expenses} shadow={0}>
    <TableHeader name="category">Category</TableHeader>
    <TableHeader name="name">Name</TableHeader>
    <TableHeader name="cost">Cost</TableHeader>
  </DataTable>
)
export default ExpensesList;

我哪里可能出了问题？

更新

奇怪的是，我在index.jsx中为一些测试数据发送了添加费用，而且添加得很好。。。

store.dispatch(addExpense({ name: 'X', category: 'food', cost: 10 }))
store.dispatch(addExpense({ name: 'Y', category: 'test', cost: 20 }))
store.dispatch(addExpense({ name: 'Z', category: 'food', cost: 30 }))

啊！。。。看起来mdl-js-layout有问题。。。当我删除它时，布局确实会出错，但我没有得到错误。。。