首先，請看代碼。
const [detailTitle, setDetailTitle] = useState(actionItemArray[activeRow].TITLE);
const [detailDesc, setDetailDesc] = useState(actionItemArray[activeRow].DESCRIPTION);
//Unix time ?? ??
function getUnixTime(t) {
const date = new Date(t * 1000);
const year = date.getFullYear();
const month = '0' (date.getMonth() 1);
const day = '0' date.getDate();
return year.toString().substr(-2) '-' month.substr(-2) '-' day.substr(-2);
}
const [detailStartDate, setDetailStartDate] = useState(getUnixTime(actionItemArray[activeRow].START_DATE));
const [detailDueDate, setDetailDueDate] = useState(getUnixTime(actionItemArray[activeRow].DUE_DATE));
const [detailPriority, setDetailPriority] = useState(actionItemArray[activeRow].P_PK);
const [detailStep, setDetailStep] = useState(actionItemArray[activeRow].STEP_PK);
const [disabled, setDisabled] = useState(true);
const [disableTag, setDisableTag] = useState(true);
const detailTitleChange = (e) => {
setDetailTitle(e.target.value);
};
const detailDescChange = (e) => {
setDetailDesc(e.target.value);
};
const detailStartDateChange = (e) => {
setDetailStartDate(e.target.value)
};
const detailDueDateChange = (e) => {
setDetailDueDate(e.target.value)
};
對于 Priority 和 Step，我給了 onChange 事件，因為它是一個 Select Form。
const updateActionItem = () => {
const url = '/api/work/update-action-item';
const data = {
ACTION_PK : actionItemArray[activeRow].ACTION_PK,
OWNER_PK : actionItemArray[activeRow].owner.USER_PK,
TITLE : detailTitle,
DESCRIPTION: detailDesc,
START_DATE : detailStartDate,
DUE_DATE : detailDueDate,
P_PK : detailPriority,
STEP_PK : detailStep,
updateCols: ['TITLE', 'DESCRIPTION']
};
post(url, data)
.then((res) => {
alert('???????');
console.log(res);
})
.catch((error) => {
console.log(error)
});
};
此函式用于 POST 請求。我將每個編輯過的資料發送到資料庫。
但是資料物件，你可以看到updateCols：[]。
在這個陣列中，我必須放置已更改的屬性。
例如，如果我更改 TITLE、DESCRIPTION 和 START_DATE，我必須將陣列更改為
updateCols : ['TITLE', 'DESCRIPTION', START_DATE]
我在使用此 POST 請求表時遇到問題，因為我認為不可能每次都進行跟蹤。
有人可能只編輯 TITLE，有人可能編輯每個屬性。這意味著我必須有條件地更改 POST 請求表單。
我需要一些智慧。請幫忙！
uj5u.com熱心網友回復：
您可以在發布前將資料保存在狀態。下次發布時，將新資料與舊狀態進行比較，從而使用 Array.prototype.push() 創建 updateCols。您可以使用三元運算子來比較值。
const [old, setOld] = useState({});
const updateActionItem = () => {
const url = '/api/work/update-action-item';
let data = {
ACTION_PK : actionItemArray[activeRow].ACTION_PK,
OWNER_PK : actionItemArray[activeRow].owner.USER_PK,
TITLE : detailTitle,
DESCRIPTION: detailDesc,
START_DATE : detailStartDate,
DUE_DATE : detailDueDate,
P_PK : detailPriority,
STEP_PK : detailStep,
updateCols : []
};
data.ACTION_PK!==old.ACTION_PK?data.updateCols.push('ACTION_PK'):null;
data.OWNER_PK!==old.OWNER_PK?data.updateCols.push('OWNER_PK'):null;
data.TITLE!==old.TITLE?data.updateCols.push('TITLE'):null;
data.DESCRIPTION!==old.DESCRIPTION?data.updateCols.push('DESCRIPTION'):null;
data.START_DATE!==old.START_DATE?data.updateCols.push('START_DATE'):null;
data.DUE_DATE!==old.DUE_DATE?data.updateCols.push('DUE_DATE'):null;
data.P_PK!==old.P_PK?data.updateCols.push('P_PK'):null;
data.STEP_PK!==old.STEP_PK?data.updateCols.push('STEP_PK'):null;
setOld(data);
post(url, data)
.then((res) => {
alert('???????');
console.log(res);
})
.catch((error) => {
console.log(error)
});
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/378610.html
標籤：javascript 反应 接口 邮政