我想創建一個簡單的應用程式，您可以在其中搜索影像。該應用程式是使用 fetch（我不能使用 axios）和 Unsplash API 在 React 中撰寫的。我當前的嘗試將具有靜態值“汽車”的影像串列呈現到鏈接中，如下所示：https://api.unsplash.com/search/photos?query=**cars* * 在下面的代碼示例中，我正在使用一個變數“ ${query} ”能夠搜索影像，但它不起作用。我需要幫助來弄清楚如何解決這個問題。提前致謝！
代碼：
import React from "react";
import { useState, useEffect } from "react";
export default function App() {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [query, setQuery] = useState("");
useEffect(() => {
fetch(`https://api.unsplash.com/search/photos?query=${query}`, {
headers: {
Authorization: "Client-ID UnsplashId",
},
})
.then((response) => {
if (!response.ok) {
throw new Error(
`This is an HTTP error: The status is ${response.status}`
);
}
return response.json();
})
.then((actualData) => {
console.log(actualData);
setData(actualData.results);
setError(null);
})
.catch((err) => {
setError(err.message);
setData(null);
});
}, []);
return (
<div>
{/* onSubmit={this.handleSubmit} */}
<form>
<label>
<input
placeholder="Search"
type="text"
// value={this.state.value}
// value="cars"
onChange={(e) => setQuery(e.target.value)}
/>
</label>
<input type="submit" value="Submit" />
</form>
{data &&
data.map(({ id, description, urls }) => (
<img key={id} alt={description} src={urls.regular} />
))}
</div>
);
}
uj5u.com熱心網友回復：
我認為您想實作有條件地觸發效果
例子
useEffect(() => {
// This will execute whenever 'query' variable changes.
}, [ query ]);
// You can bind the state using the 'value' attribute.
<input
placeholder="Search"
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
uj5u.com熱心網友回復：
我沒有悄悄地得到這個問題，但我認為每次輸入更改時您都想進行搜索，因此我建議使用輸入而不是表單并將“查詢”添加到“useEffect”條件：
useEffect(() => {
fetch(`https://api.unsplash.com/search/photos?query=${query}`, {
headers: {
Authorization: "Client-ID UnsplashId",
},
})
.then((response) => {
// here
}, [query]);
<input
placeholder="Search"
type="text"
onChange={(e) => setQuery(e.target.value)} />
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/466115.html