小编典典

在数组上映射时如何为React子项指定键

reactjs

我在React Contact List组件中有一个方法,该组件将返回另一个组件。我已经开始工作了,但是很好奇是否有更好的方法来构造我使用密钥的方式。

具体来说-我在下面的方法中询问这行代码(数据被硬编码为示例入门):

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: "[email protected]",
            phone: "999999999999"
        },
        {
            id: 2,
            fName: "bbbbb",
            lName: "bbbbbbb",
            imgUrl: "https://media.licdn.com/mpr/mpr/shrinknp_200_200/bbb.jpg",
            email: "[email protected]",
            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: "[email protected]",
            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>
        );
    }
}

我一直在努力使其无法工作并没有得到警告,Warning: Each child in an array or iterator should have a unique "key" prop.但是我想知道语法或结构是否有效以及是否应该对其进行重构。


阅读 195

收藏
2020-07-22

共1个答案

小编典典

此代码没有错。密钥是必需的,以便react知道如何渲染子节点。实际上,您的实现正是程序员需要做的反应。现在,可以更改使用哪个键的详细信息,但看起来您已经拥有了性能最高的解决方案。

主要要求是密钥是唯一的,只要contact.id始终是唯一的(如果它来自数据库,那么它将是唯一的),那么您就可以了。

另外,您也可以在地图上使用索引作为键,但我不推荐这样做(我将在代码片段后进行解释)。

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

我个人认为您的方法是最好的方法,因为它可以防止其他渲染。我的意思是,例如,当从服务器返回新的联系人时,每个联系人行将被重新呈现,因为每个联系人的数组中的索引是不同的(假设您没有像对待堆栈一样对待它)…具有该联系人索引的新联系人数据的不同索引索引将导致重新呈现。因为contact.id是一个静态数字,如果该联系人的数据没有更改,那么反应不会重新呈现它。

2020-07-22