我在 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线不报错)。
最佳答案
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 示例
关于javascript - react 不变违规=>不一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36051362/