Zugriff React Prop-Array in Komponente

Question

Ich versuche, über ein Array in Requisionen in meiner React-Komponente gespeichert. Das Problem ist, dass ich einen Fehler bekomme, der besagt, dass "Schritt nicht definiert" ist, selbst wenn ich ein Array von Schritten wie unten definiert habe. Irgendwelche Gedanken darüber, was ich falsch mache? Danke im Voraus!

render() { 
const protocol = this.props.protocol; 
const steps = protocol.steps; 
let stepList = null; 

if (steps != null) { 
    stepList = <ul> 
    steps.map(
     step => <li>{step.title}</li> 
    ) 
    </ul>; 
} else { 
    stepList = 'Do not display list'; 
} 

return (
    <div className="protocols-detail"> 
    List of steps for {protocol.title} 
    { stepList } 

    </div> 
); 

}

Answer 1

Ausgabe in dieser Linie ist, vergessen Sie {} zu verwenden, innerhalb HTML Elemente jeden js-Code zu verwenden immer {} verwenden versuchen, diesen:

stepList = <ul> 
    { 
     steps.map(
     (step,i) => <li key={i}>{step.title}</li> 
     ) 
    } 
    </ul>; 

Eine weitere Sache immer die eindeutige key zu jedem Artikel beim Erstellen der ui elements dynamically in der loop.

Answer 2

Sie müssen steps.map in { } (innen <ul></ul> Tags) wickeln

so sollte es sein:

render() { 
const protocol = this.props.protocol; 
const steps = protocol.steps; 
let stepList = null; 

if (steps != null) { 
    stepList = <ul> 
    {steps.map(
     step => <li>{step.title}</li> 
    )} 
    </ul>; 
} else { 
    stepList = 'Do not display list'; 
} 

return (
    <div className="protocols-detail"> 
    List of steps for {protocol.title} 
    { stepList } 

    </div> 
);