尽管在每次迭代中递增，但为什么所有对象都具有相同的日期？

Question

您好，我希望能够使用 for 循环修改状态中的对象数组，并且想知道执行此操作的最佳方法！

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'
  }
])

具体来说，我想修改 paymentData 状态数组中每个对象的日期。我预期的最终结果类似于

{
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'
}

我的函数旨在获取当前日期，将其递增 2 周，然后将新日期设置为对象 [i]。我的想法是用以前的状态数据创建一个新的对象数组，修改日期并再次将其设置为状态。

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

当我尝试这个时，我的最终状态看起来像这样，但是当我 console.log updatedPaymentData 变量时，它在每个循环中被设置为正确的递增日期。

Answer 1

每个对象都引用相同的日期对象，导致它们在循环后都具有相同的日期。您可以在每次迭代中创建一个新日期来解决此问题。

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)

最好确保状态的值在渲染中是相同的 type/format，这样您就可以进行此转换并将转换后的数组用作初始状态。

// 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',
    },
  ])
);

Answer 2

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

尽管在每次迭代中递增，但为什么所有对象都具有相同的日期？

Why do all objects have the same date despite incrementing in each iteration?

javascript

for-loop

ecmascript-6

reactjs

react-hooks