Синтаксис JSX if / else в React

Question

Я пытаюсь выяснить, как добавить здесь if / else так, чтобы, если classroomId имеет значение, была достигнута конечная точка importUserToClassroom.Если нет, я бы хотел выполнить тот же код, но с конечной точкой importUsers.Любые идеи о том, где я ошибаюсь с моим синтаксисом, будут высоко оценены!

handleFormSubmit(data) {
    const {
        importUserToClassroom,
        importUsers,
        addFlashMessage,
        formatErrors,
        showUiBlocked,
        hideUiBlocked,
        match: {params: {classroomId}},
    } = this.props;
    showUiBlocked();
    const users = userDataToList(data);
    {
        classroomId !== undefined ? (
            importUserToClassroom({
                users,
                classroomId,
            })
        ) : (
            importUsers({users})
        )
    }
        .then(() => {
            hideUiBlocked();
            addFlashMessage('Users imported successfully', 'success');
            this.context.router.history.push('/users');
        })
        .catch(err => {
            hideUiBlocked();
            if (err.status !== 409) {
                return formatErrors(err).then(err => {
                    this.setState({
                        errors: err,
                    });
                });
            } else {
                this.setState({
                    errors: {
                        usernames: err.data.message,
                    }
                });
            }
        });
}  

Обновление: следующее сработало!

handleFormSubmit(data) {
    const {
        importUserToClassroom,
        importUsers,
        addFlashMessage,
        formatErrors,
        showUiBlocked,
        hideUiBlocked,
        match: {params: {classroomId}},
    } = this.props;
    showUiBlocked();
    const users = userDataToList(data);
    if (!isEmpty(classroomId)) {
        importUserToClassroom({
            users,
            classroomId,
        })
            .then(() => {
                hideUiBlocked();
                addFlashMessage('Users imported successfully', 'success');
                this.context.router.history.push('/users');
            })
            .catch(err => {
                hideUiBlocked();
                if (err.status !== 409) {
                    return formatErrors(err).then(err => {
                        this.setState({
                            errors: err,
                        });
                    });
                } else {
                    this.setState({
                        errors: {
                            usernames: err.data.message,
                        }
                    });
                }
            });
    } else {
        importUsers({users})
            .then(() => {
                hideUiBlocked();
                addFlashMessage('Users imported successfully', 'success');
                this.context.router.history.push('/users');
            })
            .catch(err => {
                hideUiBlocked();
                if (err.status !== 409) {
                    return formatErrors(err).then(err => {
                        this.setState({
                            errors: err,
                        });
                    });
                } else {
                    this.setState({
                        errors: {
                            usernames: err.data.message,
                        }
                    });
                }
            });
    }
}

Answer 1

Это не совсем JSX, но у вас есть некоторые синтаксические ошибки.Вы не можете использовать фигурные скобки, как это.Если importUserToClassroom и importUsers возвращают обещания, вы можете попробовать что-то вроде этого:

const savePromise = classroomId ? 
  importUserToClassroom({
    users,
    classroomId,
  }) :
  importUsers({users});

  savePromise.then(() => {
    hideUiBlocked();
    addFlashMessage('Users imported successfully', 'success');
    this.context.router.history.push('/users');
  })