React Warning：ReactMount：ルート要素が元のコンテナから削除されました。新しいコンテナ：[オブジェクトHTMLDivElement]

Question

私はエラー

警告取得しています：ReactMount：ルート要素は、元のコンテナから削除されました。新しいコンテナ：[オブジェクトHTMLDivElement]

DOMノードが置き換えられているようですか？しかし、間違いがどこにあるかわからない。私は費用を追加するとき、私はこのエラーを取得する...どこでも私が見ることができる

Code (GitHub)

をinnerHTMLプロパティを設定しないでください。コードは、私は多分のrelavent以下だと思う：

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私が間違っている場合があります

コンテナ/ 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; 

？

更新

不思議

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

ああ...私はいくつかのテストデータのindex.jsxに追加費用派遣している、と彼らは細かい追加されます！...との問題のように見えますmdl-js-layout ...私はそれを削除すると、レイアウトは消えますが、私はエラーを取得しません...

Answer 1

これは答えるとこれを閉じる。実際にはMDLの問題、具体的にはmdl-js-layoutクラスです。そのレイアウトを削除すると、ブレークしますが、エラーも停止します。