Question

我收到错误

警告：ReactMount：Root元素已从其原始容器中删除。新容器：[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'
  });
};

减速器/ 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;

容器/ 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类。如果我删除该布局中断，但错误也会停止。

React Warning：ReactMount：Root元素已从其原始容器中删除。新容器：[object HTMLDivElement]

1 个答案: