盡管在每次迭代中遞增，為什么所有物件都具有相同的日期？

嗨，我希望能夠使用 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 周，然后將新日期設定為 object[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 更新的PaymentData 變數時，它被設定為每個回圈中正確的遞增日期。

uj5u.com熱心網友回復：

每個物件都參考相同的日期物件，導致它們在回圈后具有相同的日期。您可以在每次迭代中創建一個新日期來解決此問題。

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)

最好確保狀態的值在渲染中具有相同的型別/格式，以便您可以進行此轉換并將轉換后的陣列用作初始狀態。

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

uj5u.com熱心網友回復：

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

標籤：javascript 反应 for循环 ecmascript-6 反应钩子

上一篇：如何根據來自Firebase的資料向按鈕添加條件（顏色、文本）

下一篇：未處理的承諾拒絕：SyntaxError：字串與ReactJS網站中的預期模式不匹配