Wie können Daten in einer react.map-Anweisung zurückgegeben werden?

Question

Ich möchte warningItem innerhalb meiner return-Anweisung verwenden, um einige Daten in eine react-Komponente zu mappen.

Ich möchte über area Schleife, aber habe Probleme mit der Syntax.

createWarnings = warningsRawData => { 
    return warningsRawData.map(warningItem => { 
     return (
      <div> 
       <p className={styles.warningMainText} /> 
       <p>warningItem.area[0]</p> 
      </div> 
     ); 
    }); 
}; 

Answer 1

Es sieht so aus, als ob Sie die Klammern darum herum vermissen. Versuchen:

createWarnings = warningsRawData => { 
    return warningsRawData.map((warningItem, i) => { 
     return (
      <div key={i}> 
       <p className={styles.warningMainText} /> 
       <p>{warningItem.area[0]}</p> 
      </div> 
     ); 
    }); 
}; 

Answer 2

Wenn Sie Schleife elememnt in zurückzukehren reagieren, fügen key Attribut ist ein Muss. Else erhalten Sie {warningItem.area[0]}

createWarnings = warningsRawData => { 
    let values = warningsRawData.map((warningItem,index) => { 
     return (
      <div key={index}> 
       <p className={styles.warningMainText} /> 
       <p>{warningItem.area[0]}</p> 
      </div> 
     ); 
    }); 
    return values 
} 

hinzufügen warning.And;