this.props.commands.mapが機能

Question

私はコンポーネントから私のprops.commandをレンダリング問題を抱えているではありません何とかここに発生しますエラーはここに私の

import { getCommand } from '../../actions/commandActions'; 
    import { connect } from 'react-redux'; 

    class Command extends React.Component { 
     constructor(props) { 
     super(props); 
     this.state = { 
      commands: [] 
     }; 
     } 

     componentWillMount(){ 
     this.props.getCommand(); 
     this.setState({commands: this.props.commands}); 
     } 


     render(){ 
     console.log('command props.commands: ', this.props.commands); 
     return (
      <table className="table table-bordered table-responsive"> 
      <thead> 
       <tr> 
       <th>Name</th> 
       <th>Command</th> 
       <th>Action</th> 
       </tr> 
      </thead> 
      <tbody> 
      { 
       this.props.commands.map(function(commands) { 
       return 
       <tr> 
       <td>{commands.name}</td> 
       <td>{commands.command}</td> 
       <td>{commands._id}</td> 
       </tr> 
       }) 
      } 
      </tbody> 
      </table> 
     ); 
     } 
    } 

    Command.propTypes = { 
     getCommand: React.PropTypes.func.isRequired, 
     errors: React.PropTypes.object.isRequired 
    } 

    function mapStateToProps(state) { 
     return{ 
     commands: state.commandReducer.commands, 
     errors: state.commandReducer.errors 
     } 

    } 

    export default connect(mapStateToProps, { getCommand })(Command); 

あるthis.propsのはconsole.logです.commands：

command props.commands: Array[1] 
0: Object_id: "5892c3d4d3128f231ab032bb" 
command: "env $(cat .env) DEBUG=ow* APP=sso node index.js" 
createdAt: "2017-02-02T05:29:56.392Z" 
enabled: true 
name: "Frank Command" 
timeout: 180000 
uri: "http://139.59.60.15/commands/5892c3d4d3128f231ab032bb" 

私は私のテーブルにそれをレンダリングしたかったが、私は任意の助けがAPPRある

this.props.commands.map is not a function

のエラーを得ましたあなたに感謝します

Answer 1

あなたのコメントから、this.props.commandsは、最初に配列の代わりに空のオブジェクトを与えるようです。コードを変更して配列を小道具として返すか、小切手をかけることができます。 はまた、あなたがコンソールに示されているようでui dynamicallyを作成するたびにcommandsが、もう一つ、mapを使用してui項目を作成する前にチェックを入れ、objectです。最初

{ Array.isArray(this.props.commands) && this.props.commands.map(function(commands, index) { 
       return 
       <tr key ={i}> 
       <td>{commands.name}</td> 
       <td>{commands.command}</td> 
       <td>{commands._id}</td> 
       </tr> 
       }) 
      } 

Answer 2

のようなあなたのオブジェクトをotのユニークなキーを割り当てますloop常に試してみてください、ラッパーにユニークkeyを割り当てる： を試してみてください、あなたはとにかく状態で小道具を保存しているので、あなたにも状態の上にマッピングすることができます

{ 
    Array.isArray(this.props.commands) && this.props.commands.map((commands,i) => { 
    return 
     <tr key={i}> 
     <td>{commands.name}</td> 
     <td>{commands.command}</td> 
     <td>{commands._id}</td> 
    </tr> 
    }) 
}