Javascript React警告：ReactMount:根元素已从其原始容器中移除。新容器：[对象htmldevelment]

我发现了错误

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

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

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

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;

我在添加费用时出现此错误。代码我认为可能与以下相关：

container/addexpensedilog.jsx

（其中

addExpense

动作被调度）

操作/index.js

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

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;

减员/费用.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;

容器/expensesList.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;

演示文稿/expensesList.jsx

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

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;

---

啊！。。。看起来这是MDLJS布局的问题。。。当我删除它时，布局确实会关闭，但我没有得到错误

好，回答并关闭此问题。这实际上是MDL的一个问题，更具体地说是

mdljslayout

class。如果我删除布局中断，但错误也会停止