Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

159
Views
How can I conditionally do POST request in React?

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!

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You can save your data in the state before you publish it. When you post next time, compare the new data with the old state and thus create the updateCols using Array.prototype.push() . You can use ternary operators to compare 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) }); };
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!