Question

我在Internet Explorer 11中的React中映射不可变数组对象时遇到问题。

例如，我有来自服务数组的响应：

array = [{title: 'Hello world'}, {title: 'Night view'}]

我将此数组转换为reducer中的immutable并存储它。然后在TitlesContainer中，在render方法中尝试迭代项目：

render () {
  const { array } = this.props
  return (
    <ul>
      {array.map((item, index) => {
        return <li key={index}>{item.get('title')}</li>
      })}
    </ul>
  )
}

一切正常，适用于Chrome，Opera，Firefox。但是在Internet Explorer 11中我遇到了这个错误：

不变违规：对象作为React子对象无效（找到：List [[object Object]，[object Object]]）。如果您要渲染子集合，请使用数组，或使用React附加组件中的createFragment（object）包装对象。检查TitlesContainer的呈现方法。

在webpack.config.js中，由于IE11，我已将babel-polyfill包含在模块enrty中，因此在此之前抛出'Promise is not defined'。它修复了promise问题，但仍然存在不可变数组中的迭代问题。

使用array.toJS().map代替array.map有一种解决方法，但我认为必须有办法让它发挥作用。

Answer 1

请像在<li>中一样，在＆＃39;（）＆＃39;中尝试返回<ul>：

render () {
  const { array } = this.props
    return (
      <ul>
        {array.map((item, index) => {
          return (<li key={index}>{item.get('title')}</li>)
      })}
      </ul>
    )

}

您也可以尝试使用速记：

{array.map((item, index) => (<li key={index}>{item.get('title')}</li>)};

另外，请让<li>的密钥更加独特。如果没有这个，反应就无法检查这个元素的确切变化。 F.E. make key={'name_of_my_list' + item.get('id)}（如果你当然有id;））

React Internet Explorer 11渲染映射在Immutable集合错误

1 个答案: