0
163
Views¿Por qué todos los objetos tienen la misma fecha a pesar de incrementarse en cada iteración?
Hola, quiero poder modificar una matriz de objetos en estado usando un bucle for y me gustaría saber la mejor manera de hacerlo.
const [ paymentData, setPaymentData ] = useState([ { paymentN: 'First Payment', paymentDate: 'March 07' }, { paymentN: 'Second Payment', paymentDate: 'March 24' }, { paymentN: 'Third Payment', paymentDate: 'April 8th', }, { paymentN: 'Fourth Payment', paymentDate: 'April 21st' } ])Específicamente, quiero modificar las fechas en cada objeto en mi matriz de estado de datos de pago. Mi resultado final previsto sería algo así como
{ paymentN: 'First Payment', paymentDate: 'Mon Mar 14 2022 07:17:05 GMT-0400' }, { paymentN: 'Second Payment', paymentDate: 'Mon Mar 28 2022 07:17:05 GMT-0400' }, { paymentN: 'Third Payment', paymentDate: 'Mon Apr 11 2022 07:17:05 GMT-0400' }, { paymentN: 'Fourth Payment', paymentDate: 'Mon Apr 25 2022 07:17:05 GMT-0400' }Mi función está destinada a obtener la fecha actual, incrementarla en 2 semanas y luego establecer la nueva fecha en el objeto [i]. Mi idea era tomar los datos de estado anteriores, crear una nueva matriz de objetos con la fecha de modificación y establecerla de nuevo.
const createPaymentPlan = ( amount, e ) => { e.preventDefault(); const currentDate = new Date() var obj = [] for ( let i = 0 ; i < 4 ; i ++ ) { currentDate.setDate(currentDate.getDate()+14) const updatedPaymentData = paymentData[i] updatedPaymentData.paymentDate = currentDate obj.push(updatedPaymentData) } setPaymentData(obj) }Cuando probé esto, mi estado final se ve así, sin embargo, cuando consola. registro la variable de datos de pago actualizados, se establece en la fecha incrementada correcta en cada bucle.
2 answers
Answer question0
Cada objeto se refiere al mismo objeto de fecha, lo que hace que todos tengan la misma fecha después del bucle. Puede crear una nueva fecha en cada iteración para solucionar este problema.
const paymentData = [{ paymentN: 'First Payment', paymentDate: 'March 07' }, { paymentN: 'Second Payment', paymentDate: 'March 24' }, { paymentN: 'Third Payment', paymentDate: 'April 8th', }, { paymentN: 'Fourth Payment', paymentDate: 'April 21st' } ] const currentDate = new Date() const array = [] for (let i = 0; i < paymentData.length; i++) { currentDate.setDate(currentDate.getDate() + 14) const updatedPaymentData = paymentData[i] updatedPaymentData.paymentDate = new Date(currentDate); array.push(updatedPaymentData) } console.log(array)Es mejor asegurarse de que los valores del estado sean del mismo tipo/formato en todas las representaciones para que pueda hacer esta conversión y usar la matriz convertida como el estado inicial.
// this can be defined somewhere outside the component const formatPaymentData = (paymentData) => { return paymentData.reduce( ((currentDate) => (formatted, curr) => { currentDate.setDate(currentDate.getDate() + 14); formatted.push({ ...curr, paymentDate: new Date(currentDate) }); return formatted; })(new Date()), [] ); }; const [paymentData, setPaymentData] = useState( formatPaymentData([ { paymentN: 'First Payment', paymentDate: 'March 07', }, { paymentN: 'Second Payment', paymentDate: 'March 24', }, { paymentN: 'Third Payment', paymentDate: 'April 8th', }, { paymentN: 'Fourth Payment', paymentDate: 'April 21st', }, ]) );0
const createPaymentPlan = ( amount, e ) => { e.preventDefault(); let currentDate=new Date(); let finalPayment=paymentData.map((e)=>{ currentDate=new Date(new Date().setDate(currentDate.getDate()+1)) e.paymentDate=currentDate; return e }) setPaymentData(finalPayment); }