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

Question

首先，请看一下代码。

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

对于优先级和步骤，我给出了onChange事件，因为它是一个选择表单。

    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请求。我将每个编辑的数据发送到DB。

但是数据对象，您可以看到updateCols:[]。

在这个数组中，我必须放置已更改的属性。

例如，如果我更改标题、说明和开始日期，我必须将数组更改为

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

我觉得不可能每次都能查到这张申请表，所以我觉得这张申请表有问题。

有人可能只编辑标题，有人可能编辑每个属性。这意味着我必须有条件地更改POST申请表。

我需要一些智慧。请帮助！

Answer 1

像这样的？

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 : []
     };
     
     data.ACTION_PK!==old.ACTION_PK?data.STEP_PK.push('ACTION_PK'):null;
     data.OWNER_PK!==old.OWNER_PK?data.STEP_PK.push('OWNER_PK'):null;
     data.TITLE!==old.TITLE?data.STEP_PK.push('TITLE'):null;
     data.DESCRIPTION!==old.DESCRIPTION?data.STEP_PK.push('DESCRIPTION'):null;
     data.START_DATE!==old.START_DATE?data.STEP_PK.push('START_DATE'):null;
     data.DUE_DATE!==old.DUE_DATE?data.STEP_PK.push('DUE_DATE'):null;
     data.P_PK!==old.P_PK?data.STEP_PK.push('P_PK'):null;
     
     setOld(data);
     
     post(url, data)
     .then((res) => {
         alert('수정되었습니다');
         console.log(res);
     })
     .catch((error) => {
         console.log(error)
     });
 };