1

我正在尝试将我的 WordPress 网站中的一些博客文章包含到我的应用程序中。我已经使用每个帖子的单独帖子 ID 测试了 API，并让它在我的视图中加载数据。但是，我现在正在尝试获取一个数组，但它似乎没有获取与帖子相关的 ID 来填充视图。我在这里做错了什么？

   let content: MarkdownData
@State var beholdarticles: BeholdArticle?
@State private var htmlContent = ""





let articles: [BeholdArticle] = []



private func loadArticle() {
    
    guard let url = URL(string: "https://behold.hagleyparksda.com/wp-json/wp/v2/posts") else {
        return
        
    }
    URLSession.shared.dataTask(with: url) {data, response, error in
        
        guard let data = data else { return }
        if let decodedData = try? JSONDecoder().decode(BeholdArticle.self, from: data){
            
            DispatchQueue.main.async {
                self.beholdarticles = decodedData
            }
        }
    }.resume()
}

这是 ForEach 循环

var body: some View {
    
    ScrollView (.horizontal) {
       
           
      
        ForEach(articles) { item in
            ZStack {
                     
                        if beholdarticles?.thumbnail != nil {
                            
                            WebImage(url: URL(string: beholdarticles!.thumbnail)!)
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(width:350, height: 450)
                            
                        } else {
                            
                            Image("behold_imagecard")
                                    .resizable()
                                    .aspectRatio(contentMode: .fill)
                        }
                        
                        
                        HStack {
                            VStack (alignment: .leading) {
                                Text(beholdarticles?.title.rendered ?? "Loading...")
                                        .font(.system(size: 30, weight: .bold))
                                        .foregroundColor(Color.white)
                                    .frame(width: 270)
    //                            Text(beholdarticles?.title.rendered ?? "Loading...")
    //                                    .font(.system(size: 18, weight: .regular))
    //                                    .foregroundColor(Color.white)
    //                                .frame(width: 270)
                            }
                            Spacer()
                        }
                        
                            
                         
                        VStack {
                            Spacer()
                            HStack {
                                Image(uiImage: #imageLiteral(resourceName: "healthicon"))
                                Text("Spirituality")
                                    .font(.system(size: 23))
                                    .foregroundColor(Color.white)
                                Spacer()
                            }
                            .background(VisualEffectBlurView(blurStyle: .systemUltraThinMaterial))
                        }.onAppear{
                            loadArticle()
                        }
                    
                   
            } .frame(width:350, height: 450)
            .shadow(color: Color(#colorLiteral(red: 0.2549019754, green: 0.2745098174, blue: 0.3019607961, alpha: 1)) .opacity(0.2), radius: 20, x: /*@START_MENU_TOKEN@*/0.0/*@END_MENU_TOKEN@*/, y:14)
            .cornerRadius(30)
        }
        
      
        }

我的数据模型

struct BeholdArticle: Decodable, Identifiable  {

var id: Int
var slug: String
var link: String
var thumbnail: String
var title: BeholdArticleTitle
var content: BeholdArticleContent

enum CodingKeys: String, CodingKey {

    case thumbnail = "jetpack_featured_media_url"
    case slug, link, title, content
    case id = "id"
}
}

struct BeholdArticleTitle: Decodable {

var rendered: String
 }

struct BeholdArticleContent: Decodable {

var rendered: String
}

我只是想用数据填充我的循环，但它似乎并没有从 api 调用中获取 ID。在这里需要一些帮助

我仍然将图像 URL 包含在条件语句中。目前图像不会通过。如何将其调整为更新的设置？

  if beholdarticles?.thumbnail != nil {
                                
                                WebImage(url: URL(string: item.thumbnail)!)
                                    .resizable()
                                    .aspectRatio(contentMode: .fill)
                                    .frame(width:350, height: 450)
                                
                            } else {
                                
                                Image("behold_imagecard")
                                        .resizable()
                                        .aspectRatio(contentMode: .fill)
                            }

这是更新的图像代码：

ForEach(articles) { article in
                ZStack {
                         
                            if article.thumbnail != nil {
                                
                                WebImage(url: URL(string: article.thumbnail)!)
                                    .resizable()
                                    .aspectRatio(contentMode: .fill)
                                    .frame(width:350, height: 450)
                                
                            } else {

                                Image("behold_imagecard")
                                        .resizable()
                                        .aspectRatio(contentMode: .fill)
                            }
4

1 回答 1

1

如果您想从该 URL 端点解码 JSON，您将需要使用[BeholdArticle].self而不是BeholdArticle.self，因为它是一个数据数组。

此外，不要调用loadArticle的每个元素ForEach（它永远不会被调用，因为它一开始没有数据），而是在视图的顶层调用它。

这是一个精简的示例：

struct ContentView: View {
    @State private var articles : [BeholdArticle] = []
    
    var body: some View {
        ScrollView {
            VStack (alignment: .leading) {
                ForEach(articles) { article in
                    Text(article.title.rendered)
                        .multilineTextAlignment(.leading)
                    if let thumbnailURL = URL(string: article.thumbnail) {
                       WebImage(url: thumbnailURL)
                           .resizable()
                           .aspectRatio(contentMode: .fill)
                           .frame(width:350, height: 450)
                    }
                    
                }
            }
        }
        .onAppear {
            loadArticles()
        }
    }
    
    private func loadArticles() {
        guard let url = URL(string: "https://behold.hagleyparksda.com/wp-json/wp/v2/posts") else {
            return
        }
        URLSession.shared.dataTask(with: url) {data, response, error in
            
            guard let data = data else { return }
            if let decodedData = try? JSONDecoder().decode([BeholdArticle].self, from: data){
                
                DispatchQueue.main.async {
                    self.articles = decodedData
                }
            }
        }.resume()
    }
}
于 2021-06-23T17:17:03.857 回答