如何将本地JSON文件数组显示为SwiftUI List并修复可选类型编译报错

错误原因 #

你的Flavor模型中descriptors被定义为[String]?可选类型，而SwiftUI的ForEach要求传入非可选的集合类型，直接传入可选数组就会触发解包相关的编译错误。

修复方案 #

方案1：实现你需求的每行展示单条记录所有描述的效果（完全匹配你给出的示例） #

直接对可选数组做处理，合并内容后展示，代码如下：

struct DescriptorListView: View {
    @ObservedObject var datas = ReadData()
    var body: some View {
        List(datas.flavors) { item in
            // 可选值为nil时显示占位文本，非空时用逗号拼接所有描述
            let descContent = item.descriptors?.joined(separator: ", ") ?? "暂无风味描述"
            Text("- \(descContent)")
        }
    }
}

方案2：每个描述单独占一行的写法 #

如果你需要每个描述单独展示为一行，用空合运算符给可选数组设置默认空数组即可：

struct DescriptorListView: View {
    @ObservedObject var datas = ReadData()
    var body: some View {
        List(datas.flavors) { item in
            // 可选数组为nil时默认传入空数组，不会显示任何内容
            ForEach(item.descriptors ?? [], id: \.self) { descriptor in
                Text("- \(descriptor)")
            }
        }
    }
}

如果需要在描述为空/为nil时显示占位提示，可以用可选绑定：

struct DescriptorListView: View {
    @ObservedObject var datas = ReadData()
    var body: some View {
        List(datas.flavors) { item in
            if let descriptors = item.descriptors, !descriptors.isEmpty {
                ForEach(descriptors, id: \.self) { descriptor in
                    Text("- \(descriptor)")
                }
            } else {
                Text("暂无风味描述")
                    .foregroundColor(.secondary)
            }
        }
    }
}

额外优化建议 #

你当前视图模型中的loadData方法用了强制解包，JSON解析失败时会直接崩溃，建议改成安全的do-catch写法：

func loadData()  {
    guard let url = Bundle.main.url(forResource: "flavors", withExtension: "json") else {
        print("Json文件未找到")
        return
    }
    do {
        let data = try Data(contentsOf: url)
        let flavors = try JSONDecoder().decode([Flavor].self, from: data)
        self.flavors = flavors
    } catch {
        print("JSON解析失败：\(error.localizedDescription)")
    }
}

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