React, diğerinde iç içe geçmiş bir dizi ile karşılaşıldığında ne olur?

Question

React bir dizi oluşturduğunda, bu dizideki her öğe için bir anahtar sağlanmalıdır. Aksi takdirde, bir uyarı verilecektir: detaylı açıklaması var

Warning: Each child in an array or iterator should have a unique "key" prop 

Doc yaklaşık how to identify keys ve why we do this yanıt verin.

Ancak, this case numaralı belgede, başka bir öğede yuvalanmış bir dizi oluştururken uyarı verilmediğini fark ettim. Tepki içinde

const numbers = [1, 2, 3, 4, 5]; 
const listItems = numbers.map((numbers) => 
    <li>{numbers}</li> 
); 

// 'listItems' is wrapped in an array 
ReactDOM.render(
    <ul>{[listItems]}</ul>, 
    document.getElementById('container') 
); 

ayıklama sonra ise, çocuk anahtarlarını doğrulamak için kullanılan, function validateChildKeys bulmak:

/** 
* file path: react/lib/ReactElementValidator.js 
* Ensure that every element either is passed in a static location, in an 
* array with an explicit keys property defined, or in an object literal 
* with valid key property. 
* 
* @internal 
* @param {ReactNode} node Statically passed child of any type. 
* @param {*} parentType node's parent's type. 
*/ 
function validateChildKeys(node, parentType) { 
    if (typeof node !== 'object') { 
    return; 
    } 
    if (Array.isArray(node)) { 
    for (var i = 0; i < node.length; i++) { 
     var child = node[i]; 
     if (ReactElement.isValidElement(child)) { 
     validateExplicitKey(child, parentType); 
     } 
    } 
    } else { 
    // do some other validation 
    // .................. 
    } 
} 

fonksiyon ReactElement.isValidElement(child) bir alt düğüm kontrol edilmelidir olmadığını kontrol etmek için kullanılır. Yuvalama dizisini denetlerken, örn. array = [array0,array1,array2], dizi0, dizi1, dizi2, $$typeof adlı bir özelliğe sahip olmayan Array nesnesidir, bu nedenle validateExplicitKey işlevi hiçbir zaman çağrılmaz, çocuk düğümü asla denetlenmez, elbette, uyarı iletisi hiçbir zaman atılmaz.

acaba:

1. bu kabullenecek Tepki mu?
2. Yeniden oluşturma işlemi ne zaman gerçekleşir?

3. Performans üzerinde etkisi var mı? Ne kadar getiriyoruz dava aslında validateChildKeys Yukarıdaki yorum açıklanan düşünüyorum

   const Page = (tables) => (
       tables.map((table, idx) => (
        [<Title/>, 
        ...(table.get('forms').map((form, aidx) => (<Form/>))) 
        ] 
       )) 
   ); 
   

Answer 1

: yaparsa, bu durumu önlemek için nasıl Bu kodu işlemek istediğinizde

Her öğenin, statik bir konumda , tanımlanmış açık bir anahtar özelliğine sahip bir dizide veya geçerli anahtar özelliğine sahip bir nesne değişmezinde geçirildiğinden emin olun. senin listItems dizi sadece bir kez değil, beyan vermektedir üzerinde yeniden hesaplanır yana

, tepki o müteakip kılan öğeleri ayırt etmek anahtarlarına ihtiyacım olmayacak varsayar. Eğer işlemek fonksiyonu içine dizi bildirimi taşırsanız

Eğer dizi iç içe olsa bile yine hata görürsünüz:

const numbers = [1, 2, 3, 4, 5]; 

// 'listItems' is wrapped in an array 
ReactDOM.render(
    <ul> 
    {[numbers.map((numbers) => <li>{numbers}</li>)]} 
    </ul>, 
    document.getElementById('container') 
);