如何在 React 中有条件地执行 POST 请求？

Question

First, please look at the code.

    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)
    };

and for Priority and Step, I gave onChange event as it is a 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)
        });
    };

this function is for a POST request. I send every edited data to DB.

But data object, you can see updateCols: [].

In this array, I have to put properties that have been changed.

For example, If I change TITLE, DESCRIPTION and START_DATE, I have to change the array to

updateCols : ['TITLE', 'DESCRIPTION', START_DATE]

I am having trouble with this POST request form as I think it is impossible to track things down every time.

Someone might edit only TITLE, someone might edit every property. That means I have to change POST request form conditionally.

I need some wisdom. Please Help!

Answer 1

You can save your data in state before posting. When you post the next time, compare the new data with the old state and hence create the updateCols using Array.prototype.push(). You can use ternary operators to compare the values.

   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)
         });
     };