我正在嘗試呼叫一個函式來從 api 獲取資料并顯示資料。但是，當我呼叫此函式時，頁面會重繪 并重置狀態，因此頁面不會顯示任何內容。
在子組件中，我有一個輸入框和一個表單。OnSubmit，此表單將輸入保存到父組件中的狀態(listOfNames)。我進行連接，因為 state 是一個可以隨時添加到其中以搜索更多名稱的陣列。結果顯示在表格中
<Form onSubmit={() => props.setListOfNames(props.listOfNames.concat(localName))}>
<InputGroup>
<FormControl type="text" placeholder="Add Name" onChange={(e) => setLocalName(e.target.value)}/>
<Button variant="outline-secondary" type="submit" variant="primary">Button</Button>
</InputGroup>
</Form>
在父級中，我有一個 UseEffect 可以檢測到此狀態的更改。
useEffect(() => {
searchNames();
}, [listOfNames]);
在更改時，它將呼叫一個函式(searchNames)從 api 獲取資料。fetch 函式使用listOfNames狀態來搜索。
const searchNames = () =>{
//e.preventDefault(); doesn't work even with 'e' as param
fetch(API_URL, {
method:'POST',
headers: { "Content-Type": "application/json; charset=utf-8"},
body: JSON.stringify(listOfNames)
})
//... and so on
但是，當我呼叫此函式時，整個頁面都會重繪 ，并且資料不會顯示，因為重繪 會將listOfNames狀態重置為空，然后才能搜索。我想知道是否可以將事件傳遞給此函式，以便我可以preventDefault()或者是否有其他解決方案。
uj5u.com熱心網友回復：
onSubmit 的默認行為是重繪 頁面，您可以這樣做event.preventDefault()以防止這樣的默認行為
<Form onSubmit={(event) => {
event.preventDefault()
props.setListOfNames(props.listOfNames.concat(localName))
}}>
<InputGroup>
<FormControl type="text" placeholder="Add Name" onChange={(e) => setLocalName(e.target.value)}/>
<Button variant="outline-secondary" type="submit" variant="primary">Button</Button>
</InputGroup>
</Form>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/370898.html
標籤：javascript 反应 事件 反应钩子 使用效果
下一篇：手柄更改功能有問題，遺漏一個字符