反應「遇到無效子女」錯誤

我正在使用react來呈現類似於電子表格的表。每個單元格都有一個輸入字段，並且您可以在整個行中填充每個單元格。但是，我只希望在任何時候都有一行輸入爲空。我使用下面的代碼來渲染<tbody>反應「遇到無效子女」錯誤

var existing_rows_length = this.state.existing_rows.length 
    , new_index = existing_rows_length + this.state.new_rows.length - 1 

var existing_rows = this.state.existing_rows.map(function(row, i) { 
    return (
    <TableRow data={row} key={"row-" + i} index={i} /> 
) 
}) 

var new_rows = this.state.new_line_items.map(function(row, i) { 
    return (
    <TableRow data={li} key={"row-" + i + existing_row_length} index={i + existing_row_length} unsaved={true} /> 
) 
}) 

return (
    <tbody> 
    {existing_rows} 
    {new_line_items} 
    <TableRow data={{}} index={new_index} unsaved={true} /> 
    </tbody> 
)

然後，在現場的每個輸入，它系列化的投入，並將其設置爲「new_rows」

var new_rows = $(this.getDOMNode()) 
    .find('[data-unsaved][data-has-changed]') 
    .map(function(i, el) { return $(el).find('input') }) 
    .map(function(i, inputs) { 
    return _.reduce(inputs, function(memo, input) { 
     var $input = $(input) 
     , attrName = $input.attr('name').match(/\[([^\[]*)\]$/)[1] 
     memo[attrName] = $input.val() 
     return memo 
     }, {}) 
    }) 

this.setState({ // This is line 17, in the function ensureNewRow, of table_body.js 
    existing_rows: this.state.existing_rows 
, new_rows: new_rows 
})

我的邏輯在於一旦你開始在一個新行中填寫輸入，那麼它會將其保存在state.new_rows中，並在其下面呈現另一個空白行。然而，而是停止呈現，給我以下錯誤：

[Warning] Child objects should have non-numeric keys so ordering is preserved. Check the render method of LineItemList. See http://fb.me/react-warning-keys for more information. (851543_741761425909553_1789649762_n.js, line 9663) 
[Error] Error: Invariant Violation: traverseAllChildren(...): Encountered an invalid child; DOM elements are not valid children of React components. 
    perform (851543_741761425909553_1789649762_n.js, line 15428) 
    batchedUpdates (851543_741761425909553_1789649762_n.js, line 8681) 
    enqueueUpdate (851543_741761425909553_1789649762_n.js, line 13744) 
    replaceState (851543_741761425909553_1789649762_n.js, line 6211) 
    setState (851543_741761425909553_1789649762_n.js, line 6183) 
    ensureNewRow (table_body.js, line 17) 
    (anonymous function) ([native code], line 0) 
    dispatch (jquery.js, line 4642) 
    handle (jquery.js, line 4310)

繼鏈接，其實需要我在這裏：「http://facebook.github.io/react/docs/multiple-components.html#dynamic-children」，它說在前面加上字符串鍵（我已經做了 - 我試圖爲前綴來具有相同的前綴，並嘗試使用不同的前綴）。

對不起，代碼不太漂亮，我一直在這個問題上堅持了幾天！如果任何人至少可以指出我的方向是正確的，或者讓我知道可能導致問題的原因，那將非常有幫助！或者，如果我違反了一些React原則，讓我知道它是什麼，以便我可以修復它（這是我第一次使用React）

來源

2015-01-09 cadlac

問題來自意外地將查詢對象保存到狀態。這導致變量在地圖函數中翻轉，將關鍵字設置爲[對象對象]，並且僅給出一個整數來呈現呈現的地址。我只是在new_rows任務鏈的末尾打電話.toArray()，它工作正常！

來源

2015-01-09 23:21:05 cadlac

反應「遇到無效子女」錯誤

回答

相關問題