来自 API 请求"The method '[]' was called on null. Receiver: null Tried calling: [](0)"更新的错误

Question

我试图使用来自API的数据，但我需要的数据是为不同的请求找到的。在颤动中有未来。等待，这样我就可以对API的必要部分发出请求。这个想法是，我正在尝试创建火车时刻表。在这张列车时刻表上，我需要车次、站台名称和到达时间。我试图做文档和视频中所描述的一切，但我不能这样做，因为我得到一个错误'The method '[]' was called on null. Receiver: null Tried calling: []("st_title")'

在问这里之前，我试着做这样的东西:

body:ListView.builder(itemBuilder: (context, index){
return ListTile(
title: Text(stops[index]['st_title']),

，但它不工作，给了我一个错误:

方法'[]'被调用为null。

我在这里看到了一个类似错误的解决方案，但是我尝试了所有的解决方案，还是不知道我到底做错了什么。你能给我指出来吗?也许我并没有真正意识到我到底应该做什么。你们能帮帮我吗?

我的完整代码是:

Map <String, dynamic> stops;
Map <String, dynamic> marhe;
Map <String, dynamic> arrival;

@override
void initState() {
// TODO: implement initState
super.initState();
fetchData();
}
Future fetchData() async{
String username = '***';
String password = '***';
String basicAuth =
'Basic ' + base64Encode(utf8.encode('$username:$password'));
print(basicAuth);
final result = await Future.wait([
http.get( 'http://link/getTableCur.php?fmt=json',
headers: <String, String>{'authorization': basicAuth}),
http.get( 'http://link//getStops.php?fmt=json',
headers: <String, String>{'authorization': basicAuth}),
http.get( 'http://link//getMarshes.php?fmt=json',
headers: <String, String>{'authorization': basicAuth}),
]);
setState(() {
stops = json.decode(result[0].body);
marhe = json.decode(result[1].body);
arrival = json.decode(result[2].body);
});
}

@override

Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
),
body:ListView.builder(itemBuilder: (context, index){
return ListTile(
title: Text(stops[index]['st_title']),
leading: Text(marhe['mr_num']),
subtitle: Text(arrival['ta_arrivetime'].toString()),
);
}
//title: Text(arrival[index]['tc_arrivetime']?? ''),
),

更新!

谢谢你的帮助@Patrick Freitas，我正试图使他说的一切，但现在我得到一个错误:

The getter 'length' was called on null.
Receiver: null
Tried calling: length

:

body:  stops.length > 0 ? ListView.builder(
//itemCount: stops.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
trailing: Text(marhe[index]["mr_num"]),
title: Text(stops[index]['st_title']),
// subtitle: Text(arrival[index]["ta_arrivetime"]),
);
},
) : CircularProgressIndicator()
)

也是当我使用isDataObtained ? ListView.builder{...}:CircularProgressIndicator()

时，然后它给我无休止的加载，没有数据出现在屏幕上。它也给出了一个错误"Error: List<dynamic> is not a subtype of type Map<String, dynamic>"，我也发现了类似的问题解决这个问题-错误:List不是Map<String,>

类型的子类型，我的代码是这样的:

setState(() {
stops = json.decode(result[0].body[0]);
marhe = json.decode(result[1].body[0]);
arrival = json.decode(result[2].body[0]);
isDataObtained = true;
});
}

所有链接的json格式如下:

for **getTableAll**
[
{
"ta_id": 1,
"srv_id": 1,
"st_id": 3026,
"mr_id": 305,
"rl_racetype": "B",
"uniqueid": 21,
"ta_systime": "2021-03-11 15:01:47",
"ta_arrivetime": "2021-03-11 15:06:11",
"mv_id": 957,
"rc_kkp": "",
"ta_len2target": 4.996839,
"u_inv": false
},
{
for **getStops**
{
"st_id": 1,
"ok_id": "18410",
"sr_id": 0,
"st_title": "Station1",
"st_desc": "Station1",
},
for **Marshes:** 
[
{
"mr_id": 1,
"tt_id": 1,
"mt_id": 2,
"mr_num": "112",

},

这是三个数组，我需要同时从这三个数组中获取数据:如前所述，我需要到达时间、车次和平台名称的数据。我尝试使用颤振文档中描述的经典数据检索，但对我来说没有任何作用。在Stackoverflow上，我被告知我需要使用Future。等等，但是现在我卡住了，而且很困惑。

Answer 1

Flutter不知道您的异步请求是否已经返回，因此它试图在没有任何信息的情况下呈现数组。为了防止这种情况，你可以添加一个IF验证来验证你的数组是否已经被填充。

使用三元if:

body:
stops.length > 0 ? ​
ListView.builder(...) :
CircularProgressIndicator() 

由于有三个数组要填充，因此可以创建一个布尔值来控制请求是否已经填充了这三个数组，如isdatareceived.

Map <String, dynamic> stops;
Map <String, dynamic> marhe;
Map <String, dynamic> arrival;
bool isDataObtained = false;

Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(),
body:
isDataObtained ? ​
ListView.builder(...) :
CircularProgressIndicator() 
)
)
}

Future fetchData() async{
final result = await Future.wait([...]);
setState(() {
stops = json.decode(result[0].body);
marhe = json.decode(result[1].body);
arrival = json.decode(result[2].body);
isDataObtained = true;
});
}