コンポーネントのReact prop配列へのアクセス

Question

私はReactコンポーネントのpropsに格納されている配列をマップしようとしています。問題は、以下のように定義された一連のステップがある場合でも、「ステップは定義されていません」というエラーが表示され続けることです。私が間違ってやっていることに対する考え？前もって感謝します！

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

問題は、このラインである、あなたは常にこれを試して{}を使用HTML要素内の任意のjsのコードを使用して、{}を使うのを忘れていました：

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

もう1つのことは、そのアイテムを作成するときに常に各アイテムにユニークなkeyを割り当てます。 loopのui elements dynamically。

Answer 2

は、あなたはそれがあるべき{ }（<ul></ul>内部タグ）に

をsteps.mapをラップする必要があります。

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> 
);