如何在Alert函数中使用生成的message变量？代码调试求助

我编写了以下用于显示错误信息的代码，但无法在Alert函数中正确使用生成的message参数。请问星号位置应填写什么内容？我尝试过类似Alert.alert(strings.message.something)的形式但找不到合适的取值；直接写Alert.alert(strings.message)时弹窗能打开，但没有显示错误内容。

原代码：

function createTimer(): void {
    if (!timer.start) {
        Alert.alert(strings.reminders['date-required'])
        return;
    } else if (!timer.end) {
        Alert.alert(strings.reminders['date-required'])
        return;
    }
    let curTimer = timer;
    curTimer.task = currentTask
    setCreateLoading(true)
    timerService.create(curTimer).then(() => {
        setCreateLoading(false);
        Alert.alert(strings.alert.success, '', [
            { text: strings.button.ok, onPress: () => closeNewTimerModal() }
        ],
        { cancelable: false }
        )     
    }).catch(e => {
        let message: string;

        if(e.code == Error.TIMER_INTERVALS_INTERSECT) {
            message = strings['time-tracking']['time-intervals-intersect']
        }
        else if(e.code == Error.START_DATE_IS_AFTER_END_DATE) {
            message = strings['time-tracking']['start-after-end']
        }
        else if(e.code == Error.END_DATE_IS_AFTER_NOW) {
            message = strings['time-tracking']['end-after-now']
        }
        else if(e.code == Error.TASK_IS_ARCHIVED) {
            message = strings['time-tracking']['task-archived']
        }

        Alert.alert(*)
        setCreateLoading(false);
    })
}

解决方案 #

你已经通过条件判断生成了message变量，直接将其作为Alert的参数传入即可。同时需要处理message未被赋值的边界情况（比如遇到未定义的错误码），避免弹窗无内容。

将Alert.alert(*)替换为以下代码：

// 优先使用国际化配置的错误标题，无配置则用通用文案
const alertTitle = strings.alert.error || '错误';
// 若未匹配到错误码，用通用错误文案兜底
const alertMessage = message || strings['time-tracking']['unknown-error'] || '发生未知错误';

Alert.alert(alertTitle, alertMessage, [
    { text: strings.button.ok }
], { cancelable: false })

说明 #

1. 标题参数：第一个参数是弹窗标题，建议使用你已有的strings.alert.error（如果在国际化配置中定义了），没有则用通用的'错误'文案
2. 内容参数：第二个参数直接传入你生成的message变量，它已经对应了不同错误码的国际化文案
3. 边界处理：添加默认文案兜底，避免出现未覆盖的错误码时弹窗无内容（需要在strings['time-tracking']中提前定义unknown-error，或者直接写死通用文案）
4. 交互一致性：添加确定按钮并设置不可取消，和成功弹窗的交互逻辑保持一致

另外，你可以用switch语句简化错误码的判断逻辑，让代码更易读：

let message: string;
switch(e.code) {
    case Error.TIMER_INTERVALS_INTERSECT:
        message = strings['time-tracking']['time-intervals-intersect'];
        break;
    case Error.START_DATE_IS_AFTER_END_DATE:
        message = strings['time-tracking']['start-after-end'];
        break;
    case Error.END_DATE_IS_AFTER_NOW:
        message = strings['time-tracking']['end-after-now'];
        break;
    case Error.TASK_IS_ARCHIVED:
        message = strings['time-tracking']['task-archived'];
        break;
    default:
        message = strings['time-tracking']['unknown-error'] || '发生未知错误';
}

内容的提问来源于stack exchange，提问作者AHMET ER