SwiftUI条件按钮不可见仍执行操作致数组越界崩溃问题

问题回顾 #

你开发了一个德语单词展示的SwiftUI应用，核心逻辑是通过Next按钮切换单词，到最后一个单词时按钮变为Done重置列表。正常点击没问题，但快速点击按钮或交替点击按钮与TitleView时，会触发Index out of range崩溃。你通过在按钮action里重复判断index范围修复了问题，但想知道具体成因。

原核心代码：

struct ContentView: View {
  @State private var index = 0
  
  var body: some View {
    let english = Word.words[index].english
    let german = Word.words[index].german
    
    ZStack {
      Color("BackgroundColor")
        .ignoresSafeArea()
      VStack(spacing: 20) {
        Spacer()
        TitleView(word: german)
        CaptionView(word: english)
        Spacer()
        if index < Word.words.count - 1 {
          Button {
            index += 1
          } label: {
            Text("Next Word")
          }
        } else {
          Button {
            index = 0
          } label: {
            Text("Done")
          }
        }
      }
    }
  }
}

崩溃成因分析 #

1. SwiftUI视图更新的异步特性
   SwiftUI的视图渲染是状态驱动的，修改@State变量index后，视图重新计算的任务会被加入主线程队列，但这个过程不是即时完成的。比如当index即将达到最后一个单词的下标（Word.words.count - 2）时，快速点击两次Next按钮：

• 第一次点击让index变成Word.words.count - 1，此时视图应该切换为Done按钮，但body的重新计算还在排队，屏幕上显示的仍然是Next按钮；
• 第二次点击这个还没来得及更新的Next按钮，会让index直接变成Word.words.count，超出数组的最大下标，后续访问Word.words[index]就会崩溃。

2. body开头的数组访问无保护
   你在body最开头直接写了let english = Word.words[index].english，这行代码会在每次视图重新计算时执行，不管当前index是否合法。哪怕你点击的是TitleView（非交互组件，但SwiftUI在某些情况下会触发视图更新），如果此时index已经因为快速点击越界，这行代码会直接触发崩溃。

为什么二次判断能修复 #

你在按钮action里添加的二次判断if index < Word.words.count - 1 { index += 1 }，相当于在修改index前做了最后一道防线——即使视图还没完成更新，旧的Next按钮依然存在，点击时也会先检查当前index的状态，避免它超出合法范围。

更优雅的修复方案 #

没必要重复写判断逻辑，有几种更简洁的方式：

1. 修改index时直接做边界限制

把Next按钮的action改成：

Button {
  index = min(index + 1, Word.words.count - 1)
} label: {
  Text("Next Word")
}

这样不管点击多少次，index都不会超过数组的最大下标，从根源上避免越界。

2. 数组访问前做安全校验

在body开头先确保index合法，再访问数组：

let safeIndex = min(max(index, 0), Word.words.count - 1)
let currentWord = Word.words[safeIndex]
let english = currentWord.english
let german = currentWord.german

即使index因为某种原因越界，也会被修正到合法范围内。

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