React 中的 JSX if/else 语法答案

【问题标题】：JSX if/else syntax within ReactReact 中的 JSX if/else 语法
【发布时间】：2018-05-15 19:19:05
【问题描述】：

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

【问题讨论】：

你也可以试试typeof classroomId !== 'undefined'而不是classroomId !== undefined
首先，请详细说明您要解决的问题。但是，一般来说，你所做的一切都不应该出现在 JSX 中。事实上，很多人（和我）会争辩说，你所有的网络逻辑甚至都不应该在 component 中，更不用说在 JSX 中了。因此，请专注于进行调用、返回一些数据，然后根据该数据的状态决定要呈现的内容。
@user8227859 您能解释一下您在更新示例中包含的 isEmpty 函数吗？

标签： reactjs syntax jsx

【解决方案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');
  })

【讨论】：