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}，该组件将正确呈现。

Baz示例

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

反应不变违规=＆gt;不符

1 个答案: