问题描述
希望使用文本字段中的值执行 API 调用并将结果显示在列表中。无法使用文本字段中的 $name 值到 url 中,然后进行 API 调用
到目前为止我的代码
WebService.swift
import Foundation
public class UserFetcher: ObservableObject {
@Published var shoes: [Shoe] = []
@Published private var name: String = ""
init(){
load()
}
func load() {
// let url = URL(string: "https://api.thesneakerdatabase.com/v1/sneakers?limit=10&name=wolf%20in%20sheeps%20clothing")! // the format the API requires
let url = URL(string: "https://api.thesneakerdatabase.com/v1/sneakers?limit=10&name=" + name)!
URLSession.shared.dataTask(with: url) {(data,response,error) in
do {
if let d = data {
let decodedLists = try JSONDecoder().decode(APIResponse.self,from: d)
dispatchQueue.main.async {
// self.users = decodedLists
self.shoes = decodedLists.shoeResults
}
}else {
print("No Data")
}
} catch {
print ("Error")
}
}.resume()
}
}
ContentView.swift
import Foundation
import SwiftUI
import Combine
import SDWebImage
import SDWebImageSwiftUI
struct ContentView: View {
@Observedobject var fetcher = UserFetcher()
@State private var name: String = ""
var body: some View {
NavigationView {
vstack {
vstack(alignment: .leading) {
TextField("Search",text: $name)
}
List(fetcher.shoes) { Shoe in
vstack (alignment: .leading) {
Text(Shoe.name)
Text(Shoe.shoe)
.font(.system(size: 11))
.foregroundColor(Color.gray)
Text(Shoe.brand)
.font(.system(size: 11))
.foregroundColor(Color.gray)
Text(Shoe.styleId)
.font(.system(size: 11))
.foregroundColor(Color.gray)
Text(".\(Shoe.year)")
.font(.system(size: 11))
.foregroundColor(Color.gray)
WebImage(url: URL(string: "\(Shoe.media.thumbUrl)"))
.resizable()
.aspectRatio(contentMode: .fill)
}
}
}
.navigationBarTitle(Text("Search"))
}
}
我确定它有一些很明显的东西,但过去两个小时一直盯着它看,似乎无法工作。任何方向将不胜感激谢谢
解决方法
尝试以下操作:
public class UserFetcher: ObservableObject {
@Published var shoes: [Shoe] = []
init(){
//load() <- remove this
}
func load(_ name: String) { //<-- add parameter
....
}
struct ContentView: View {
@ObservedObject var fetcher = UserFetcher()
@State private var name: String = ""
var body: some View {
NavigationView {
VStack {
VStack(alignment: .leading) {
TextField("Search",text: $name)
}
List(fetcher.shoes) { Shoe in
...
}
}.onAppear(fetcher.load(name)) //<--- begin to load
}
}
,
如果您想要在 TextField 中输入并查看结果更新的正常行为,您可能需要这样的内容(请参阅有关更改内容的内联注释):
import SwiftUI
import Combine
public class UserFetcher: ObservableObject {
@Published var shoes: [Shoe] = []
@Published var name: String = "" // Not private any more
private var cancellable : AnyCancellable?
init() {
cancellable = $name
.debounce(for: .seconds(1),scheduler: RunLoop.main) //only run once the text has been static for 1 second
.sink { (newSearch) in
self.load(searchTerm: newSearch)
}
}
func load(searchTerm: String) { //take the search term as a parameter
guard !searchTerm.isEmpty,let url = URL(string: "https://api.thesneakerdatabase.com/v1/sneakers?limit=10&name=\(searchTerm)") else {
return //don't search if the term is empty or the URL is invalid
}
URLSession.shared.dataTask(with: url) {(data,response,error) in
do {
if let d = data {
let decodedLists = try JSONDecoder().decode(APIResponse.self,from: d)
DispatchQueue.main.async {
self.shoes = decodedLists.shoeResults
}
}else {
print("No Data")
}
} catch {
print ("Error: \(error)") //print your error here
}
}.resume()
}
}
struct ContentView: View {
@ObservedObject var fetcher = UserFetcher()
var body: some View {
NavigationView {
VStack {
VStack(alignment: .leading) {
TextField("Search",text: $fetcher.name) //using the name property from fetcher now
}
List(fetcher.shoes) { shoe in //don't use capital letters for variable names -- not idiomatically correct Swift and it can get confused with your `Shoe` type
VStack (alignment: .leading) {
Text(shoe.name)
Text(shoe.shoe)
.font(.system(size: 11))
.foregroundColor(Color.gray)
Text(shoe.brand)
.font(.system(size: 11))
.foregroundColor(Color.gray)
Text(shoe.styleId)
.font(.system(size: 11))
.foregroundColor(Color.gray)
Text(".\(shoe.year)")
.font(.system(size: 11))
.foregroundColor(Color.gray)
}
}
}
.navigationBarTitle(Text("Search"))
}
}
}
我还注意到,在测试时,您使用 Shoe
结构从您的 API 中获取错误,该结构来自您之前提出的问题 -- 确保 retailPrice
是 Int?
而不是 { {1}} 因为有时 API 不会返回该字段的值。
我还要指出,您可以通过将 Int
问题转化为可以使用 load
链接到 Combine 调用中的内容,从而使这更加巧妙,但这值得其他研究或一个不同的问题(此处超出范围)。