如何使用jsx格式循环内部map函数Re​​act JS

Question

我需要帮助渲染我的数组我想在map函数中创建一个条件。但不知何故，我的转换器不是接受和解析错误 这是我的代码：

import { getGroups } from '../../actions/groupActions'
import { refreshToken } from '../../actions/authActions'
import { connect } from 'react-redux'
import _ from 'lodash'
import { Link } from "react-router"

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

  componentWillMount(){
    this.props.getGroups().then(() => {
      console.log('this groups props: ', this.props)
      if(this.props.errors.code === 'UNAUTHORIZED'){
        this.props.refreshToken().then(() => {
          this.props.getGroups()
        })
      }
    })
  }

  render(){

    const groupArr =  _.valuesIn(this.props.groups)

    return (
      <div>
        <h1>Groups</h1>
        <table className="table table-responsive table-bordered table-condensed">
          <thead>
            <tr>
              <td>Name</td>
              <td>Queue</td>
              <td>Created At</td>
              <td>Execution Type</td>
              <td>Members</td>
              <td>Action</td>
            </tr>
          </thead>
          <tbody>
            {this.props.groups ? (groupArr.map((groups, i) => {
                return (
                  <tr key={i}>
                    <td>{groups.name}</td>
                    <td>{groups.queue}</td>
                    <td>{groups.createdAt}</td>
                    <td>{groups.executionType}</td>
                    <td>
                      {groups.members ? (groups.members.map((members, index) => {
                        {members.type === 'command' ? (
                          return (<div className="alert alert-success" role="alert" key={index}>{members._id}</div>)
                        ) : (
                          return (<div className="alert alert-danger" role="alert" key={index}>{members._id}</div>)
                        ) }
                      })) : (return ('No members found'))}
                    </td>
                    <td>
                      <Link className="btn btn-sm btn-warning" >
                        <i className="fa fa-pencil"></i>
                      </Link>
                      <button className="btn btn-sm btn-danger">
                              <i className="fa fa-trash-o"></i>
                      </button>
                      <button className="btn btn-sm btn-success">
                              <i className="fa fa-play-circle"></i>
                      </button>
                    </td>
                  </tr>
                )
            })) : (<tr>No records found</tr>)}
          </tbody>
        </table>
      </div>
    );
  }

}

Group.propTypes = {
  getGroups: React.PropTypes.func.isRequired,
  errors: React.PropTypes.object.isRequired,
  refreshToken: React.PropTypes.func
}

Group.contextTypes = {
  router: React.PropTypes.object.isRequired
}

function mapStateToProps(state) {
  return{
    groups: state.groupReducer.groups,
    links: state.groupReducer.links,
    errors: state.groupReducer.errors
  }
}

export default connect(mapStateToProps, { getGroups, refreshToken })(Group)

这是错误：

SyntaxError: C:/Users/Frank/Projects/crun_fe/src/js/react/components/group/Group.js: Unexpected token (55:26)
  53 |                       {groups.members ? (groups.members.map((members, index) => {
  54 |                         {members.type === 'command' ? (
> 55 |                           return ({members._id})
     |                           ^
  56 |                         ) : (
  57 |                           return ({members._id})
  58 |                         ) }

Answer 1

您正在以错误的方式使用ternary operator，语法为：

condition ? expression :  expression

这两个值都应该是表达式，但您使用的是return语句，这就是它抛出错误的原因。

如果要返回结果，请以这种方式使用它：

return a ? a+1 : 0;

没有运行此代码，只是做了一些更改来解决原始问题，请检查braces和tags的正确结束，试试这个：

{
    this.props.groups ? groupArr.map((groups, i) => {
        return (
            <tr key={i}>
                .....
                <td>
                    {
                        groups.members ? 
                            groups.members.map((members, index) => {
                                return members.type === 'command' ? 
                                    <div className="alert alert-success" role="alert" key={index}>{members._id}</div>
                                : 
                                    <div className="alert alert-danger" role="alert" key={index}>{members._id}</div>
                            }) 
                        :  <div>'No members found'</div>
                    }
                </td>
                .....
            </tr>
        )
    }) : <tr> No records found </tr>
}