[英]React 16 iterating over map rendering key
I am trying to iterate over an Immutable.js map, to render a component, however although this is rendering, it is also rendering the key to the page. 我试图遍历Immutable.js映射以渲染组件,但是尽管正在渲染,但它也在渲染页面的键。 I am not sure why.
我不知道为什么。
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>
)
}
}
The two names and urls are rendered correctly, however duplicate keys are rendered ie foo is rendered twice and so is bar, but one of the foo and bar keys has no styles, which suggests it's being rendered outside of this.renderTab
正确渲染了两个名称和url,但是渲染了重复的键,即foo渲染了两次,bar也渲染了两次,但是foo和bar键之一没有样式,这表明它是在
this.renderTab
之外渲染的。
Rendered HTML: 呈现的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>
You have mixed up the order of your arguments, assigning title
to url
and vice versa. 您混合了参数的顺序,将
title
分配给url
,反之亦然。
Also, the arguments passed to the callback function for Immutable.Map.map are (1) value, (2) key, so the fist argument is your URL and the second is your title. 另外,传递给Immutable.Map.map的回调函数的参数是(1)值,(2)键,因此fist参数是您的URL,第二个参数是您的标题。
Change the line with the call to map
like so: 更改行与调用
map
像这样:
{myMap.map((url, title) => this.renderTab(title, url))}
Another problem is that the list item elements you are rendering all have the same key “sb”, only the key of the “a” elements change, but that is not even needed. 另一个问题是,您要呈现的列表项元素都具有相同的键“ sb”,只有“ a”元素的键会更改,但这甚至不是必需的。
Change the JSX returned by renderTab
to this: 将
renderTab
返回的JSX更改为此:
<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>
Finally, the main mistake is that you expect Immutable.Map.map
to return an array, but it doesn't, it returns another immutable map, so you have to convert the value returned by the map function to an array using valueSeq and toArray . 最后,主要的错误是您期望
Immutable.Map.map
返回一个数组,但并非如此,它返回另一个不可变的映射,因此您必须使用valueSeq和toArray将map函数返回的值转换为数组。
So your map statement should actually look like this: 因此,您的map语句实际上应如下所示:
{myMap.map((url, title) => this.renderTab(title, url)).valueSeq().toArray()}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.