如何使用jsx格式循環內部映射函數React JS

Question

我需要幫助渲染我的數組我想在我的映射函數中創建一個條件。但不知何故，我transpiler不接受，並具有分析錯誤 這裏是我的代碼：

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> 
}