ein einzelnes Element aus einem Array von Daten in Reaktion Rendering

Question

Wenn ich durch eine Reihe von Objekten von Daten abzubilden und wollte nur ein einzelnes Element aus dem Array machen, basierend auf einer bestimmten Bedingung wie folgt:

dataArray.map((element, i) => { 
    if(i === currentElement){ 
    return (
     <div>{element.data}</div> 
    ) 
    } else { 
    return null; 
    } 
}); 

Wäre das akzeptabel? Dies scheint das Ergebnis wiederzugeben, war aber neugierig, ob dies der effizienteste Weg war, da dies immer noch ein Array mit einer Länge des Datenarrays mit allen Nullelementen außer dem gewünschten einzelnen Element zurückgibt.

Answer 1

Sie könnten die find Funktion verwenden, um den Wert zu erhalten, den Sie rendern möchten, anstatt eine Reihe von null Werten zu rendern.

const element = dataArray.find((el, i) => i === currentElement); 

if(element) { 
    return (<div>{element.data}</div>); 
} 

Answer 2

Karte verwenden auf einem Array wird ein weiteres Array mit Ihrer Funktion für jedes Element ausgeführt zurückkehren, so dass die Funktion, die Sie buchstäblich verwenden, ist für jedes Element den Wert ‚Null‘ in die Rück Array drängen, die ‚doesn t übergeben Sie Ihre Bedingung. Sie könnten einfach verwenden

dataArray.map((ele, i) => { 
    if(i === currentElement){ 
    return (
     <div>{element.data}</div> 
    ) 
} 

und die Karte wird einfach nichts mit einem Element, das die Bedingung nicht besteht, tun.

Das Mapping über ein Array in React wird normalerweise (oft?) Zum Erstellen von <li> Tags verwendet, und React kann in Ihrer Konsole ratlos sein, dass Sie keinen Schlüssel haben. Wenn Sie das sehen, überprüfen Sie diesen Link hier: https://reactjs.org/docs/lists-and-keys.html