我的 React Gatsby 專案中有一個頁面，我在其中從 API 檢索資料，并且該頁面呈現來自 API 的詳細資訊。
我正在嘗試添加一個搜索功能，當更新輸入搜索欄位時 API 會重新呈現，但它不起作用。
下面是代碼：
const [search, setSearch] = useState("")
const [people, setPeople] = useState()
let myHeaders = new Headers();
const getPeople = async () => {
myHeaders.append("Access-Control-Request-Headers", process.env.GATSBY_PEOPLE_ACCESS_CONTROL);
myHeaders.append("Authorization", process.env.GATSBY_PEOPLE_BEARER);
const requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
try {
let response = await fetch(
process.env.GATSBY_PEOPLE_API "&search=" search, requestOptions);
let result = await response.json();
setPeople(result)
} catch (err) { console.error(err); }
};
const searchUpdate = (e) => {
setSearch(e.target.value)
}
useEffect(() => {
getPeople()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return (
<Fragment>
<input placeholder="Search.." onChange={searchUpdate}></input>
<div className="people">
{people ? Object.values(people).map(person => {
return (
<div id={"person-" person.id} key={person.id} >
{person.name}
</div>
)
}) : "Not available.."}
</div>
</Fragment >
)
如何使搜索功能起作用？
uj5u.com熱心網友回復：
在 useEffect 方法中添加 search 作為依賴項，因為當搜索狀態更改時會呼叫 useEffect。
useEffect(() => {
getPeople()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [search])轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/495934.html
上一篇：回圈直到最大結果