web-dev-qa-db-ja.com

jsx形式を使用してマップ関数内をループする方法React JS

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：予期しないトークン（55:26）
 53 | {groups.members？ （groups.members.map（（members、index）=> {
 54 | {members.type === 'command'？（
> 55 | return（{members._id}） 
 | ^ 
 56 |）：（
 57 | return（{members._id}）
 58 |）}
reactjsreact-reduxreact-jsx
7
Frank Mendez

三項演算子 を間違った方法で使用しています。構文は次のとおりです。

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>
}
9
Mayank Shukla