Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

164
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda