反應不變違規=>不一致

Question

我在 React 組件的渲染函數中有這個 JSX

 <footer className="footer">
    <div className="container">
        <div className="row">
            <div className="col-md-2"><p className="text-muted">(Baymax team)</p></div>
            <div className="col-md-2">
                <div id="env-id">ENV: {appState.get('env')}</div>
            </div>
            <div className="col-md-2">
                <div id="collection-div-id">
                    Collection: {window.currentCollection} // << this causes errors
                </div>
            </div>
            <div className="col-md-2">
                <div id="model-div-id">
                    Model: {window.currentModel}  //<< this doesn't cause errors
                </div>
            </div>
            <div className="col-md-4">
                <progress id="hot-reload-progress-bar" value="100" max="100"></progress>
            </div>
        </div>
    </div>
</footer>

我得到的錯誤是

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {_events, length, models, _byId, dispatchToken, uniqueName, givenName, options, collNeedsPersisting, numberOfFetches}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.

為什么我試圖渲染子組件的 React 東西？ 以及為什么錯誤只發生在 Collection 行而不是 Model 行（我取出了 Collection 行並且 Model 行沒有拋出）。

Answer 1

JSX 無法使用{[...]}語法插入對象文字，這意味着如果我們有一個名為baz的對象等於{foo: 'bar'} ，我們將無法僅使用{baz} ，我們只能通過{baz.foo}它。

在提供的示例中，我們可以看到window.currentCollection包含以下屬性：

找到：帶有鍵 {_events、length、models、_byId、dispatchToken、uniqueName、givenName、options、collNeedsPersisting、numberOfFetches 的對象

我懷疑如果您更新表達式以讀取{window.currentCollection.uniqueName} ，組件將適當地呈現。

巴茲示例

http://codepen.io/mikechabot/pen/ZWLBqK?editors=0011