React中的JSX if / else语法

时间:2018-05-15 19:19:06

标签: reactjs syntax jsx

我试图弄清楚如何在此处添加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,
                        }
                    });
                }
            });
    }
}

1 个答案:

答案 0 :(得分:0)

这不是真正的JSX,但你确实有一些语法错误。你不能使用那样的大括号。如果importUserToClassroomimportUsers返回承诺,您可以尝试这样的事情:

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

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