Immutable.js 在 Safari 中映射按键

Question

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

进一步了解后，我将问题隔离到不可变集合的映射上。这是代码片段 -

    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> 元素，这些元素实际上是不可变列表对象的属性，即大小、容量、原点、级别等。这些跨度标签是错误原因。

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

Answer 1

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

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

Answer 2

我遇到了同样的问题。当我不调用 toJS() 但调用 require('immutable') 时，我会收到有关片段的警告，但不会收到额外跨度的警告，当我调用 toJS() 但不需要 'immutable' 时，然后我没有得到额外的跨度，也没有警告。

深入研究 React 问题后，我发现了这个问题：https://github.com/facebook/react/issues/4235

尽管它专门讨论 iOS，但我在桌面版 Safari 和移动版 Safari 中看到了同样的问题。

该解决方案建议为 Babel 使用 polyfill，这对我有用。

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

我必须像这样在我的 webpack 配置中添加 polyfill 作为条目：

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

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

Immutable.js 在 Safari 中映射按键

Immutable.js mapping over keys in Safari

safari

reactjs

immutable.js