如何指定一个键一个数组映射当孩子做出反应 [英] How to specify a key for React children when mapping over an array

问题描述

我在哪里，我回另一个组件一个反应联系人列表组件的方法。我已完成了工作，但很好奇，如果有更好的方法来组织我如何使用的关键。

I have a method in a react Contact List component where I am returning another component. I have got it working but am curious if there is a better way to structure how I am using the key.

具体来说 - 我问这行code从下面的方法（数据是上手样硬codeD）：

Specifically - I'm asking about this line of code from the method below (data is hard coded as sample to get started):

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

下面是在上下文中的code：

Here is the code in context:

_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组件渲染：

ShortContact Component Render:

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>
        );
    }
}

我挣扎着如何使其工作和没有得到警告警告：每个孩子在一个数组或迭代器应该有一个唯一的钥匙的道具但是我想知道如果语法或结构是有效的，如果它需要重构。

I struggled with how to make it work and not get the warning Warning: Each child in an array or iterator should have a unique "key" prop. However I am wondering if the syntax or structure is valid and if it should be refactored.

推荐答案

有什么不对的code。关键是必需的，这样的反应如何呈现子节点。其实你的代码是什么反应，需要程序员去做。现在哪个键的细节使用，这样可以改变的，但它看起来像你有最高效的解决方案了。

There is nothing wrong with this code. The key is required so that react knows how to render the children nodes. In fact your implementation is exactly what react requires the programmer to do. Now the details of which key to use and such can be changed, but it looks like you have the most performant solution already.

的主要要求是，关键是独一无二的，所以只要contact.id始终是唯一的（这如果从数据库中来那么这将是），那么你的罚款。

The main requirement is that the key is unique so as long as contact.id is always unique (which if its coming from a database then it will be) then you are fine.

另外，您可以在地图上使用索引的关键，但我不会真的建议它（我会在code段后在下面解释）。

Alternatively you can use an index on your map for the key but I wouldn't really recommend it (i'll explain below after the code snippet).

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

我个人认为你的方法是最好的方法，因为它可以prevent额外渲染。我的意思是，例如，当一个新的联系人是从服务器的每次接触行将被重新呈现，因为数组为每个联系人的指数是不同的（假设你是不是像一个堆栈对待它）返回的...与该指数在新的联系人数据不同的索引会导致重新渲染。因为contact.id是，如果该联系人的数据没有改变，那么反应的静态数不会重新渲染它。

Personally I think your approach is the best approach because it can prevent additional renders. What I mean is for instance when a new contact is returned from the server every contact row would be re-rendered because the index in the array for each contact is different (assuming you aren't treating it like a stack)... The different index with new contact data at that index would cause the re-render. Because contact.id is a static number if the data for that contact hasn't changed then react wont re-render it.

这篇关于如何指定一个键一个数组映射当孩子做出反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！