如何在 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 事件，因为它是一个 Select 表单。

    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 申请表。

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

Answer 1

您可以将数据保存在 posting 之前的状态。下次 post 时，将新数据与旧状态进行比较，然后使用 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)
         });
     };

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

How can I conditionally do POST request in React?

javascript

api

post

reactjs