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

Question

我遇到错误

Warning: ReactMount: Root element has been removed from its original container. New container: [object HTMLDivElement]

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

我在添加费用时收到此错误。我认为下面的代码可能是相关的：

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

reducers/expenses.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;

container/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;

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 有问题...当我删除它时，布局确实消失了，但我没有收到错误...

Answer 1

好的回答并关闭此问题。它实际上是 MDL 的问题，更具体地说 mdl-js-layout class。如果我删除布局中断，但错误也会停止。

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

React Warning: ReactMount: Root element has been removed from its original container. New container: [object HTMLDivElement]

javascript

reactjs

redux

react-redux