React Internet Explorer 11渲染映射Overutable集合错误的结果

Question

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

例如,我有服务数组的响应:

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

我将此数组转换为reducer中的immutable并存储它.然后在TitlesContainer渲染方法中尝试迭代项目:

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我已经包含babel-polyfill到模块,因为IE11的enrty,它抛出此之前,"无极没有定义".它修复了promise问题,但仍然存在不可变数组中的迭代问题.

有使用的解决方法array.toJS().map而不是,array.map但我认为必须有一种方法使其工作.

Answer 1

请尝试<li>使用“()”返回，就像使用以下命令一样<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>更加独特。如果没有这个，React 就无法检查该元素的确切变化。Fe make key={'name_of_my_list' + item.get('id)}（当然如果你有id的话；））