React 16 遍历地图渲染键

Question

我正在尝试遍历 Immutable.js 地图以呈现组件，但是尽管这是呈现，但它也是呈现页面的关键。我不知道为什么。

render() {
    const myMap = new Map({foo: '', bar: 'http://google.com/'})
    const {showFoo, titleAndUrl} = this.props
    return (
      <ul style={[
        styles.container,
        showFoo && styles.container.inline,
      ]}>
        {myMap.map((title, url) => this.renderTab(url, title))}
      </ul>
    )
  }

  renderTab(title, url) {
    const {showFoo, isFoo} = this.props
    return (
      <li key="sb" style={[
        styles.listItem,
        showFoo && styles.listItem.inline,
      ]}>
        <a
          href={url}
          key={title}
          style={[
            styles.link,
            styles.activeLink,
            showFoo && styles.link.inline,
          ]}
          className={isFoo ? "style" : ''}>
          {title}
        </a>
      </li>
    )
  }
}

两个名称和 url 都正确呈现，但是呈现重复键，即 foo 呈现两次，bar 也呈现两次，但是 foo 和 bar 键之一没有样式，这表明它在 this.renderTab

见图：

已渲染 HTML：

<ul data-radium="true"
    style="display: flex; align-items: center; padding: 0px; margin: 0px; list-style: none; width: 100%; border-top: 1px solid rgb(221, 221, 221); height: 48px;">
    foo
    <li data-radium="true" style="display: flex; width: 50%; height: 47px; cursor: default;"><a href=""
                                                                                                class=""
                                                                                                data-radium="true"
                                                                                                style="display: flex; justify-content: center; align-items: center; width: 100%; text-decoration: none; font-weight: 500; font-size: 16px; color: rgb(0, 31, 91); transition: color 0.1s linear;">foo</a>
    </li>
    bar
    <li data-radium="true" style="display: flex; width: 50%; height: 47px; cursor: default;"><a
            href="http://google.com" class="" data-radium="true"
            style="display: flex; justify-content: center; align-items: center; width: 100%; text-decoration: none; font-weight: 500; font-size: 16px; color: rgb(0, 31, 91); transition: color 0.1s linear;">bar</a>
    </li>
</ul>

Answer 1

您混淆了参数的顺序，将 title 分配给 url，反之亦然。

此外，传递给 Immutable.Map.map 回调函数的参数是 (1) 值，(2) 键，因此第一个参数是您的 URL，第二个是您的标题。

更改调用 map 的行，如下所示：

{myMap.map((url, title) => this.renderTab(title, url))}

另一个问题是你渲染的列表项元素都有相同的键“sb”，只有“a”元素的键改变了，但这甚至不需要。

将 renderTab 编写的 JSX return 更改为：

  <li key={title} style={[
    styles.listItem,
    showFoo && styles.listItem.inline,
  ]}>
    <a
      href={url}
      style={[
        styles.link,
        styles.activeLink,
        showFoo && styles.link.inline,
      ]}
      className={isFoo ? "style" : ''}>
      {title}
    </a>
  </li>

最后，主要错误是你期望Immutable.Map.map到return一个数组，但它不是，它return是另一个不可变的映射，所以你必须转换map 函数使用 valueSeq and toArray.

将值 return 编辑为数组

所以您的 map 语句实际上应该如下所示：

{myMap.map((url, title) => this.renderTab(title, url)).valueSeq().toArray()}

→ see related post on Stack Overflow

React 16 遍历地图渲染键

React 16 iterating over map rendering key

javascript

reactjs

immutable.js