如何解决Flutter中NoSuchMethodError: 对null调用[]方法的错误

核心问题 #

1. 直接修改Widget属性：questionMap是StatefulWidget的成员变量，属于不可变的Widget属性，直接赋值widget.questionMap = ...会触发错误，且无法触发UI更新。
2. 异步操作未正确触发刷新：Firestore的get()是异步方法，放在setState内部不会在数据返回后自动刷新UI，因为setState仅同步执行内部代码。
3. 状态变量更新未包裹在setState：listNumber和quizNumber的修改没有在setState中执行，导致UI无法及时响应变化。
4. 越界风险：listNumber +=1后未判断是否超出gameList的长度，会引发数组越界异常。

修复步骤 #

1. 将questionMap移到State类中：把questionMap从Widget移到_PlayPageState作为状态变量，初始化时从widget传入的值赋值。
2. 正确处理异步操作：在Firestore数据返回后，调用setState更新状态并刷新UI。
3. 包裹状态变量修改：所有影响UI的状态变量修改（listNumber、quizNumber）都要放在setState内。
4. 添加边界判断：点击Pass按钮时先检查listNumber是否已到最后一个元素，避免越界。

修改后的完整代码 #

class PlayPage extends StatefulWidget {
  final List gameList;
  final Map initialQuestionMap;
  final String category;
  final int myScore;

  PlayPage({
    required this.gameList,
    required this.category,
    required this.myScore,
    required this.initialQuestionMap,
  });

  @override
  State<PlayPage> createState() => _PlayPageState();
}

class _PlayPageState extends State<PlayPage> {
  int quizNumber = 0;
  int listNumber = 0;
  late Map questionMap;
  final db = FirebaseFirestore.instance;

  @override
  void initState() {
    super.initState();
    // 初始化状态变量
    questionMap = Map.from(widget.initialQuestionMap);
  }

  void changeQuiz() {
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Stack(
        children: [
          Card(
            child: SizedBox(
              height: double.infinity,
              child: SingleChildScrollView(
                child: Padding(
                  padding: const EdgeInsets.only(
                      top: 20, bottom: 200, left: 20, right: 20),
                  child: Text(
                    questionMap[widget.gameList[listNumber]][quizNumber],
                    style: const TextStyle(fontSize: 20),
                  ),
                ),
              ),
            ),
          ),
          Positioned(
            right: 10,
            bottom: 30,
            child: Column(
              children: [
                ElevatedButton(
                  child: const Text(
                    "Pass",
                    style: TextStyle(fontSize: 30),
                  ),
                  onPressed: () {
                    // 检查是否越界
                    if (listNumber >= widget.gameList.length - 1) {
                      // 处理最后一个元素的情况，比如提示或重置
                      return;
                    }

                    setState(() {
                      listNumber += 1;
                      quizNumber = 0;
                    });

                    // 异步获取Firestore数据
                    var docRef = db
                        .collection(widget.category)
                        .doc(widget.gameList[listNumber]);
                    docRef.get().then((DocumentSnapshot doc) {
                      var data = doc.data() as Map<String, dynamic>;
                      List questions = selectQuiz(data["text"]);
                      // 更新状态并刷新UI
                      setState(() {
                        questionMap[widget.gameList[listNumber]] = questions;
                      });
                      print(questionMap);
                    });
                  },
                ),
                const SizedBox(height: 30),
                SizedBox(
                  width: 70,
                  height: 70,
                  child: FloatingActionButton(
                    backgroundColor:
                        (quizNumber < 9) ? Colors.teal : Colors.grey,
                    child: const Icon(
                      Icons.arrow_forward,
                      size: 35,
                    ),
                    onPressed: () {
                      if (quizNumber < 9) {
                        setState(() {
                          quizNumber += 1;
                        });
                      }
                    },
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

关键修改说明 #

• 将原widget.questionMap改为initialQuestionMap，在State的initState中初始化状态变量questionMap。
• 点击Pass按钮时，先在setState中更新listNumber和quizNumber，再异步获取数据，数据返回后再次调用setState更新questionMap。
• 添加了listNumber的边界判断，防止数组越界。
• 原直接覆盖整个questionMap的操作改为只更新对应键的值，保留原有其他数据。

内容的提问来源于stack exchange，提问作者wasa-bi