如何在React中使用map函数遍历数组时为子元素指定一个key？

Question

在react联系人列表组件中，我有一个方法，在该方法中我正在返回另一个组件。我已经让它工作了，但是我很好奇是否有更好的方法来构建我使用key的方式。

具体来说-我在下面的方法中询问这行代码（数据已硬编码为样例以开始）：

return <ShortContact contact={contact} key={contact.id}/>

以下是相关代码：

_getContacts() {
    let contactList = [
        {
            id: 1,
            fName: "aaa",
            lName: "aaaaa",
            imgUrl: "http://brainstorminonline.com/wp-content/uploads/2011/12/blah.jpg",
            email: "[e-mail]",
            phone: "999999999999"
        },
        {
            id: 2,
            fName: "bbbbb",
            lName: "bbbbbbb",
            imgUrl: "https://media.licdn.com/mpr/mpr/shrinknp_200_200/bbb.jpg",
            email: "[e-mail]",
            phone: "888888888888"
        },
        {
            id: 3,
            fName: "Number",
            lName: "Three",
            imgUrl: "http://3.bp.blogspot.com/-iYgp2G1mD4o/TssPyGjJ4bI/AAAAAAAAGl0/UoweTTF1-3U/s1600/Number+3+Coloring+Pages+14.gif",
            email: "[e-mail]",
            phone: "333-333-3333"
        }
    ];

    return contactList.map((contact) => {
        "use strict";
        return <ShortContact contact={contact} key={contact.id}/>
    });
}

ShortContact组件渲染：

class ShortContact extends React.Component {
    render() {
        return (
            <div >
                <li className="contact-short well whiteBG">
                    <img  className="contact-short-thumb" src={this.props.contact.imgUrl}/>
                    <p className="contact-short-name">{this.props.contact.fName}</p><br />
                    <p className="contact-short-email">{this.props.contact.email}</p>
                </li>
            </div>
        );
    }
}

我曾经苦恼如何让它工作并且不收到警告警告：每个数组或迭代器中的子元素都应该有一个独特的“key”属性。然而，我想知道语法或结构是否有效，是否需要重构。

- Mary Camacho

Answer 1

这段代码没有问题。关键是需要一个key，以便react知道如何渲染子节点。事实上，您的实现正是react要求程序员做的。现在可以更改使用哪个key等细节，但看起来您已经有了最高效的解决方案。

主要要求是key是唯一的，只要contact.id始终是唯一的（如果它来自数据库，那么它就是唯一的），那么就没问题了。

或者，您可以在映射中使用索引作为key，但我真的不建议这样做（我将在下面的代码片段后解释原因）。

contactList.map((contact, i) => {
    return <ShortContact contact={contact} key={i}/>
});

个人认为你的方法是最好的方法，因为它可以防止额外的渲染。我的意思是，例如当服务器返回一个新联系人时，每个联系人行都会重新渲染，因为每个联系人在数组中的索引不同（假设你没有将其视为堆栈）... 在该索引处使用新联系人数据的不同索引将导致重新渲染。因为contact.id是一个静态数字，如果该联系人的数据没有更改，那么React就不会重新渲染它。

- John Ruddell

---

谢谢！我对React非常陌生 - 有时听到与我实际编写的代码相关的原因会产生很大的影响。 - Mary Camacho

谢谢！ - 我实际上还有一个问题 - 因为为了在同一页上添加创建联系人表单 - 我需要将我的数据移动到父组件的上一级... 这是新问题：http://stackoverflow.com/questions/36991994/move-method-from-one-component-to-another-in-react-and-still-be-able-to-use-in-o - Mary Camacho

不应使用索引作为键值。 - JoeTidee

@joetidee，这不是我在帖子中说的吗？从技术上讲，你可以这样做，但我认为这并不推荐。 - John Ruddell

不清楚为什么你的描述中说不应该使用索引。 - JoeTidee

Answer 2

需要使用唯一键。在您的示例中，使用 id 是理想的选择。有关更多信息，请参见以下内容：

https://facebook.github.io/react/docs/lists-and-keys.html

- JoeTidee