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这个。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"

我想将它渲染到我的 table 但我得到了

的错误

this.props.commands.map is not a function

感谢任何帮助，谢谢

Answer 1

从您的评论看来，this.props.commands 最初给出的是空对象而不是数组。您可以将代码更改为 return 数组作为道具或执行检查。还为您的对象分配一个唯一键，例如

{ 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，正如你在控制台中显示的那样，在使用 map 创建 ui 项目之前进行检查，另外一件事，每当在 loop 中创建 ui dynamically 始终将唯一的 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> 
   }) 
}

this.props.commands.map 不是函数

this.props.commands.map is not a function

ecmascript-6

reactjs

react-redux

axios