聽我說，我有一個表格，如果單擊一行，它將設定狀態，并且會彈出一個包含該行資訊的模式。
const [addressLine1, SetAddressLine1] = useState();
const [addressLine2, SetAddressLine2] = useState();
const [city, SetCity] = useState();
const [province, SetProvince] = useState();
const [postalCode, SetPostalcode] = useState();
const rowEvents = {
onClick: (e, row) => {
toggleTrueFalse(); //sets visibility of modal
setModalInfo(row) //An additional state I use to add infoformation
SetAddressLine1(row.AddressLine1);
SetAddressLine2(row.AddressLine2);
SetCity(row.City);
SetProvince(row.Province);
SetPostalcode(row.Postalcode);
},
};
然后，我添加了在模式上編輯此資訊并更新資料庫的功能。
使用新輸入值更新狀態并在提交時呼叫“updateSubmittedApplication”函式的輸入示例：
<Editable
editText="Edit"
initialValue={addressLine1.toString()}
isValueClickable
mode="inline"
validate={(value) => {if(value) return;}}
onValidated={(newValue) => {SetAddressLine1(newValue);}}
onSubmit={updateSubmittedApplication}
type="textfield"
/>
updateSubmittedApplication 函式和 useEffect 在依賴關系發生變化時呼叫函式。（為表資訊設定了 setSubmitted 狀態）：
const updateSubmittedApplication = () => {
const id = modalInfo.Id;
const updatedSubmit = {AddressLine1: addressLine1, AddressLine2: addressLine2, City: city,
Province: province, PostalCode: postalCode}
if(addressLine1|| addressLine2 || city || province || postalCode) {
axiosPrivate.put(`/updateapp/${id}`, updatedSubmit)
.then((res) => {
getSubmittedData();
const latestSubmitInfo = [...submitted, updatedSubmit];
setSubmitted(latestSubmitInfo);
console.log(res.data);
});
}
};
useEffect(() => {
updateSubmittedApplication();
}, [addressLine1, addressLine2, city, province, postalCode])
我理解每次單擊一行時函式都會觸發的原因，因為依賴項的狀態立即發生了變化。有沒有更好的方法可以處理這個問題，以便它不會在每次點擊時觸發，而只會在輸入更改時觸發？
uj5u.com熱心網友回復：
你可以使用一些額外的 state isDirty。
將行的狀態復制到本地狀態時，將其設定為 false。在輸入 onChange 中將其設定為 true。
然后你應該能夠寫出if (isDirty) update();你的效果。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/530705.html