Question

我在Safari中遇到这个奇怪的问题，我在控制台中收到此错误 - 警告：在作为孩子传递之前，任何对键控对象的使用都应该包装在React.addons.createFragment（object）中。

进一步观察，我已经将问题分离到映射到Immutable集合。这是代码片段 -

    var items = Immutable.fromJS([
      {id: 1, val: "foo"},
      {id: 2, val: "bar"},
      {id: 3, val: "moo"},
      {id: 4, val: "baz"}
    ]);

    var tree = items.map(function(item, i) {
      return <p key={i}>{item.get('val')}</p>
    });

    return (
        <div className="tree-view">
            {tree}
        </div>
    )

当渲染它时，您可以看到正在创建的<span>个元素实际上是Immutable List对象的属性，即 - 大小，容量，原点，等级等。这些span标记是错误。

enter image description here

知道为什么会这样吗？（我试过在一个独立的JSbin中复制这个问题但不幸的是我无法这样做）

Answer 1

我遇到了同样的问题。当我不打电话给toJS()但是require('immutable')然后我收到有关片段的警告但没有额外的跨度警告，当我打电话给toJS()但没有要求'不可变'时，那么我没有额外的跨度，没有警告。

在对React问题进行了一些挖掘之后，我找到了这个：https://github.com/facebook/react/issues/4235

即使它专门讨论iOS，我在桌面Safari和Mobile Safari中也遇到了同样的问题。

解决方案建议使用填充物Babel，这对我来说很有用。

https://babeljs.io/docs/usage/polyfill/

我必须将polyfill作为条目添加到我的webpack配置中，如下所示：

entry: ['babel/polyfill', './app/client.js']

现在可以在桌面和移动设备上使用。

Answer 2

我无法找到此问题的原因，但是，我只是通过在我的app.js文件中导入Immutable来修复它（即使它并不需要它）。

以下是相关提交 - https://github.com/prakhar1989/react-surveyman/commit/1ed80fb458c005214bc03395cc1e0fd374097dfc

Immutable.js映射到Safari中的键

2 个答案: