Flutter对接Django GraphQL注册时报NoSuchMethodError: '[]'求解决方案

错误根因 #

这个NoSuchMethodError: '[]'报错是因为你在Dart代码中直接对null对象执行了下标访问[]操作，所有触发的场景都来自你_createAccountPressed方法中未做非空校验直接链式访问接口返回值，以及上下游的配置错误：

1. Django配置错误导致接口无法正常响应：你settings.py中的EMAIL_BACKEND配置行末尾缺少闭合单引号，会导致Django启动报错，接口请求直接返回500，响应数据为空
2. GraphQL请求参数错误：你调用register mutation时传了空字符串作为用户名，django-graphql-auth默认要求用户名为必填项，参数校验不通过会导致返回结构不符合预期
3. Dart代码未做非空校验：你没有判断接口请求是否成功、响应数据是否为空，就直接链式访问result.data["register"]["errors"]["email"][0]["message"]，只要链路中任意一个字段为null就会触发当前报错
4. 响应字段访问路径错误：你的mutation返回结构中success字段在register节点下，你直接判断result.data["success"]永远为null，必然会走错误分支

修复步骤 #

1. 修复Django配置 #

打开settings.py，修正EMAIL_BACKEND配置的语法错误，重启Django服务：

# 修正前（缺少末尾单引号）
EMAIL_BACKEND ='django.core.mail.backends.console.EmailBackend
# 修正后
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'

2. 修正GraphQL请求参数 #

要么前端新增用户名输入框，要么直接用邮箱作为用户名传入，避免传空值：

// 修正前 第二个参数传空字符串
document: addMutation.register('$_email', '', '$_password'),
// 修正后 用邮箱作为用户名传入
document: addMutation.register('$_email', _email, '$_password'),

3. 重写Dart请求逻辑，增加非空校验 #

将_createAccountPressed方法替换为如下代码，逐层做非空判断，避免访问null对象：

void _createAccountPressed() async {
  print('The user wants to create an account with $_email and $_password');
  GraphQLClient _client = graphQLConfiguration.clientToQuery();
  QueryResult result = await _client.mutate(
    MutationOptions(
      document: addMutation.register('$_email', _email, '$_password'),
    ),
  );
  // 先判断请求是否有异常
  if (result.hasException) {
    print('请求异常：${result.exception.toString()}');
    return;
  }
  // 判断响应数据是否为空
  if (result.data == null) {
    print('接口返回空数据');
    return;
  }
  // 取register节点数据
  final registerRes = result.data!['register'];
  if (registerRes == null) {
    print('注册返回节点为空');
    return;
  }
  // 判断是否注册成功
  if (registerRes['success'] == true) {
    print('The user was created successfully!');
  } else {
    print('There was an error!');
    // 逐层判空后再取错误信息
    final errors = registerRes['errors'];
    if (errors != null && errors['email'] is List && errors['email'].isNotEmpty) {
      print(errors['email'][0]['message']);
    } else {
      print('未知注册错误：${errors.toString()}');
    }
  }
}

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