在Javascript中通过映射函数传入密钥

我收到一条警告，说数组中的每个孩子都需要密钥。我以前遇到过这个问题，我在Coffeescript中解决了这个问题：

我知道我必须通过

map

传入密钥，这样

map

调用的每个数组都将收到一个唯一的密钥。在Coffeescript中，我可以这样做：

component1 = React.createClass({
    render: () ->
        _.chain(@state.users).map((x) -> <component2 profile={x} key={x.id} />),@).value()
)}

component2 = React.createClass({
render: () ->
    return (
        <div>Test</div>
        <div>Test</div>
    )
})

component1=React.createClass({
呈现：（）->
_.chain（@state.users）.map（（x）->），@.value（）
)}
component2=React.createClass({
呈现：（）->
返回(
试验
试验
)
})

我尝试用Javascript来实现这一点，而不是调用一个新组件，而是调用同一组件中的另一个函数。我仍然收到警告：

export default class About extends React.Component {
    aboutMe(item) {
        return (
            <div className="col-xs-12">
                <div className="about-body">
                    <p>{item.description}</p>
                </div>
            </div>
        )
    }

    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col-xs-9">
                        {_.chain(this.props.about).map(this.aboutMe).value()} # How would I pass in a key in this `map`?
                    </div>
                </div>
            </div>
        )
    }

导出关于扩展React.Component的默认类{
关于我（项目）{
返回(
{item.description}

)
}
render（）{
返回(
{{uu.chain（this.props.about）.map（this.aboutMe.value（）}}#如何在这个'map'中传递一个键？
)
}

如果

项

具有可用作键（）的id（或其他属性），则执行相同的操作：

关于我（项目）{
返回(
{item.description}

)
}

我想我应该从调用函数的地方传入一个键。我也尝试在

aboutMe（）

中传入一个键，但警告仍然出现。数组

aboutMe（）

中创建的每个JSX元素都应该有一个键。您可以在

aboutMe（）中执行此操作

也一样。我在答案中添加了一个演示。查看控制台，查看是否没有关于

键的警告。然后删除
key={item.id}
，运行它，然后再次检查控制台。顺便说一句-我使用了
.map（）
而不是lodash的地图。我在添加
键之前和添加
键之后检查了控制台。键存储在对象中，并且我正确地记录它们（它们确实是唯一的）。我的意思是你应该检查演示，我在答案中添加了：）那么什么是
。aboutMe
，它看起来像是将它用作函数，你可能想要
.map（x=>x.aboutMe）
或类似的东西。
aboutMe(item) {
    return (
        <div className="col-xs-12" key={ item.id }>
            <div className="about-body">
                <p>{item.description}</p>
            </div>
        </div>
    )
}