javascript - react 不变违规=>不一致

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 包含以下属性:

found: object with keys {_events, length, models, _byId, dispatchToken, uniqueName, givenName, options, collNeedsPersisting, numberOfFetches

我怀疑如果您将表达式更新为 {window.currentCollection.uniqueName}，组件将正确呈现。

Baz 示例

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