Flutter使用http与FutureBuilder获取API数据时遇空调用错误求助

错误原因分析 #

1. API响应结构不匹配：你的API返回的是包含status和results字段的JSON对象（Map），但你在FutureBuilder中直接将返回值当作List处理，比如用snapshot.data?.length、snapshot.data?[i]["name"]这类List的访问方式，直接导致空指针错误。
2. 类型不匹配报错：之前出现的"期望Future或List但得到jsonMap"，是因为FutureBuilder期望数据源为List，但getProducts方法返回的是整个JSON Map，而非里面的results列表，类型不匹配引发报错。
3. 参数传递笔误：前端代码中ProductCard的image参数错误传入了price的值，会导致图片显示异常。

解决方案 #

1. 修改数据获取方法（getProducts） #

让方法直接返回results对应的List，而非整个JSON Map：

Future<List<dynamic>> getProducts() async {
  var token = localStorage.getItem("access");
  try {
    var response = await http.get(
      Uri.parse("https://digital-display.betafore.com/api/v1/digital-display/products/"),
      headers: {
        "Authorization": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjY3NzE2MjY1LCJpYXQiOjE2Njc2Mjk4NjUsImp0aSI6ImIxOGYyOTljMTg4MzRlNTVhMDcwZjBlOTQ5MTEzZDYwIiwiaWQiOjV9.DfsLsUk7Y1LZgiGJ7C2HcRNTJZwJLKmQVD1RhNmcrho"
      }
    );

    if (response.statusCode == 200) {
      final jsonData = json.decode(response.body);
      // 返回results列表，而非整个Map
      return jsonData["results"];
    } else {
      return Future.error("请求失败，状态码：${response.statusCode}");
    }
  } catch (e) {
    return Future.error("网络请求异常：$e");
  }
}

2. 修改前端FutureBuilder代码 #

现在数据源是List，可直接正常使用ListView.builder，同时修复image参数的笔误：

Center(
  child: Container(
    height: 600,
    width: 1600,
    child: FutureBuilder<List<dynamic>>(
      future: productController.getProducts(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final products = snapshot.data!;
          return ListView.builder(
            itemCount: products.length,
            itemBuilder: (context, i) {
              final product = products[i];
              return ProductCard(
                name: product["name"],
                price: product["price"],
                image: product["image"], // 修复笔误，传入正确的image字段
              );
            },
          );
        } else if (snapshot.hasError) {
          return Center(child: Text("加载失败：${snapshot.error.toString()}"));
        } else {
          return const Center(child: CircularProgressIndicator());
        }
      },
    ),
  ),
)

额外优化建议 #

• 建议创建Product实体类，使用json_serializable解析JSON数据，避免动态类型带来的空指针风险。
• 不要在FutureBuilder的future参数中直接调用方法（如productController.getProducts()），每次组件build都会重新发起请求，应将Future对象存储在State中：

late Future<List<dynamic>> _productsFuture;

@override
void initState() {
  super.initState();
  _productsFuture = productController.getProducts();
}

// 后续在FutureBuilder中使用：
future: _productsFuture,

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