Question

我通过了一个开玩笑的测试，但是获得“数组或迭代器应该具有唯一的“键”道具”。错误

我发现这是由于未定义键属性但我正在测试的组件引起的。

            if (width) {
                arrayList = listings.map(function (listing, i) {
                    return <div className="col"><ListingSimple key={i} listing={listing} displayType={displayType} /></div>;
                });
            }
            else {
                arrayList = listings.map(function (listing, i) {
                    return <ListingSimple key={i} listing={listing} displayType={displayType} />;
                });
            }

在测试中，我通过了其余组件的所有必需道具。它只是给上面的console.error。 arrayList设置正确，我可以看到我的一个或多个列表，但我只是对该错误的阻止者。

只需尝试删除此控制台错误...

警告：数组或迭代器中的每个子代均应具有唯一的“键”道具。检查...的渲染方法。有关更多信息，请参见fb react-warning-keys网站。

Answer 1

密钥必须位于要返回的最外层子节点上（在这种情况下为div）。

Answer 2

考虑将密钥添加到包装div中，例如：

if (width) {
            arrayList = listings.map(function (listing, i) {
                return <div key={i} className="col"><ListingSimple key={i} listing={listing} displayType={displayType} /></div>;
            });
        }
        else {
            arrayList = listings.map(function (listing, i) {
                return <ListingSimple key={i} listing={listing} displayType={displayType} />;
            });
        }

玩笑测试-唯一的“关键”道具错误。检查xyz的渲染方法

2 个答案: