Primero, mire el código.
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) };y para Prioridad y Paso, di el evento onChange ya que es un formulario de selección.
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) }); };esta función es para una solicitud POST. Envío todos los datos editados a DB.
Pero el objeto de datos, puede ver updateCols: [].
En esta matriz, tengo que poner las propiedades que se han cambiado.
Por ejemplo, si cambio TÍTULO, DESCRIPCIÓN y START_DATE, tengo que cambiar la matriz a
updateCols : ['TITLE', 'DESCRIPTION', START_DATE]Tengo problemas con este formulario de solicitud POST porque creo que es imposible rastrear las cosas cada vez.
Alguien podría editar solo TÍTULO, alguien podría editar todas las propiedades. Eso significa que tengo que cambiar el formulario de solicitud POST condicionalmente.
Necesito un poco de sabiduría. ¡Por favor ayuda!
Puede guardar sus datos en el estado antes de publicarlos. Cuando publique la próxima vez, compare los nuevos datos con el estado anterior y, por lo tanto, cree los updateCols usando Array.prototype.push(). Puede utilizar operadores ternarios para comparar los valores.
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) }); };