2016-06-29 7 views
0

問題:私の配列の1回の反復しかレンダリングできません。React.jsにネストされた配列をマップする方法は?

もちろん私の望む結果は、配列オブジェクトの全長を取得することです。

レンダリングされたオブジェクトフィールドに[キー]を追加するだけで、出力が得られます。このようにキーを宣言しなくても、私が得る何

子コンポーネント

... 
const Potatoes = ({potatoes}) => { 
    const PotatoItems = potatoes.map((potato, key) => { 
    if ([potato] == ''){ 
     return false 
    } else { 
    return (
     <li key={key}> 
     <span>{potato[key].name}</span> 
     <span>{potato[key].flavor}</span> 
     </li>); 
    } 
    }); 
    return (
    <div> 
     <ul> 
     {PotatoItems} 
     </ul> 
    </div> 
); 
}; 

親コンポーネント

... 
render() { 
    const potatoes = new Array(this.props.potatoes); 

    return (
     <section style={divStyle}> 
     <Potatoes potatoes={potatoes} /> 
     </section> 
    ) 
} 

答えて

0

単にジャガイモ一定の修正周りから新しいArray()を削除しますあなたの問題。

不要な追加配列が作成されたようです。

次に、子コンポーネント内のオブジェクトの[キー]参照を削除することができます。

これで問題は解決しますか?

関連する問題