反应不变违规=>不一致

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