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

Вот console.log из this.props .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" 

Я хотел, чтобы сделать это к моему столу, но я получил ошибку

this.props.commands.map is not a function

Любая помощь провер eciated thank you

Answer 1

Из вашего комментария кажется, что изначально дает пустой объект вместо массива. Вы можете внести изменения в свой код, чтобы вернуть массив в качестве реквизита или выполнить проверку. Назначают также уникальный ключ Ot ваш объект как

{ 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

Первоначально ваш commands является object, как вы показали в консоли, ставим галку перед созданием ui элементов с помощью map, еще одну вещь, когда создание ui dynamically в 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> 
    }) 
}