反应：解析错误：意外的令牌，预期的“，”

Question

I am merely trying to check a condition (invitesForEvent.length) and run a map loop on invitesForEvent, but am getting the error shown below:

I am merely trying to check a condition (invitesForEvent.length) and run a map loop on invitesForEvent, but am getting the error shown below:

./src/Invites.js
  Line 36:  Parsing error: Unexpected token, expected ","

  34 |     console.log("this.state.invitesForEventData.length: " + 
this.state.invitesForEventData.length );
  35 |     return (
> 36 |         {invitesForEvent.length <= 0
     |                         ^
  37 |             ? 'NO ENTRIES YET'
  38 |             : invitesForEvent.map((dat) => (
  39 |                 <div>Event invite entry: {invitesForEvent.length}</div>

import React from 'react';
import axios from 'axios';
import CSS from './css/styles.css';

class Invites extends React.Component {

  state = {
    invitesForEventData: [{test: []}]
  }

  componentDidMount() {
    this.getInvitesForEvent(this.props.eventid);
  }

  getInvitesForEvent = (eventid) => {

    console.log("eventid: " + eventid)
    axios.post('http://localhost:3001/api/getInvitesForEvent', {
        eventid: eventid
    })
    .then((response) => {
        console.log("response.data.data: ", response);
        this.setState({ invitesForEventData: response.data.data })
    })
    .catch(function (error) {
      console.log(error);
    });

  };

  render() {
    const invitesForEvent = this.state.invitesForEventData;

    console.log("this.state.invitesForEventData.length: " + 
this.state.invitesForEventData.length );
    return (
        {invitesForEvent.length <= 0
            ? 'NO ENTRIES YET'
            : invitesForEvent.map((dat) => (
                <div>Event invite entry: {invitesForEvent.length}</div>
            ))
        }
    )
  }
}

export default Invites;

Answer 1

You are switching the logic at that time. Use a fragment or directly return:

return (<>
{invitesForEvent.length <= 0
  ? 'NO ENTRIES YET'
  : invitesForE

Or use this way:

return invitesForEvent.length <= 0
        ? 'NO ENTRIES YET'
        : invitesForEvent.map((dat) => (
            <div>Event invite entry: {invitesForEvent.length}</div>
        ))