我目前正在使用react制作一个贷款计算器应用程序，我想根据还清的剩余金额计算每月利息。
“利息”列显示每个月月末剩余本金总额的利息，具体取决于利率。例如，如果用户选择贷款金额为10000英镑，期限为4个月，利率为3%。
主栏显示申请的贷款总额除以所选月份数（在本例中，10000英镑/4=2500英镑）。
第一个月：10000英镑3%=300英镑
第2个月：7500英镑（第1个月偿还10000-2500英镑）3%=225英镑
第三个月：5000英镑3%=150英镑
第4个月：2500英镑3%=75英镑

import React, { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [loan, setLoan] = useState(10000);
  const [duration, setDuration] = useState(1);
  const [interest, setInterest] = useState(0);
  const [dates, setDates] = useState([]);

  const getInterest = () => {
    let amountRepaid = loan - getPrincipal();
    let interestedAmount = (amountRepaid * interest) / 100;
    return Math.round((interestedAmount + Number.EPSILON) * 100) / 100;
  };

  const getPrincipal = () => {
    let dividedAmount = loan / duration;
    return Math.round((dividedAmount + Number.EPSILON) * 100) / 100;
  };

  const getTotalRepayment = () => {
    return Math.round((getInterest() + getPrincipal() + Number.EPSILON) * 100) / 100;
  };

  useEffect(() => {
    let datesArray = [];

    for (let i = 0; i < duration; i++) {
      let date = new Date();
      date = new Date(date.setMonth(date.getMonth() + 1 + i));
      datesArray.push(date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear());
    }

    setDates(datesArray);
  }, [duration]);

  return (
    <React.Fragment>
      <header>
        <h1>Your Loan</h1>
      </header>
      <main>
        <form>
          <div className="row g-3 align-items-center">
            <div className="col-auto">
              <label htmlFor="loan-input" className="form-label">
                Loan Amount (£)
              </label>
            </div>
            <div className="col-auto">
              <input
                type="text"
                className="form-control"
                id="loan-input"
                value={loan}
                onChange={e => setLoan(e.target.value)}
              />
            </div>
          </div>
          <div className="row g-3 align-items-center">
            <div className="col-auto">
              <label htmlFor="duration-input" className="form-label">
                Duration (in Months)
              </label>
            </div>
            <div className="col-auto">
              <input
                type="text"
                className="form-control"
                id="duration-input"
                value={duration}
                onChange={e => setDuration(e.target.value)}
              />
            </div>
          </div>
        </form>
        <div className="row g-3 align-items-center">
          <div className="col-auto">
            <label htmlFor="interest-range" className="form-label">
              Interest Rate (%) : {interest}
            </label>
          </div>
          <div className="col-auto">
            <input
              type="range"
              value={interest}
              onChange={e => setInterest(e.target.value)}
              min="0"
              max="10"
              step="1"
              className="form-range"
              id="interest-range"
            />
          </div>
          <table className="table">
            <thead>
              <tr>
                <th scope="col">Repayment Date</th>
                <th scope="col">Principal</th>
                <th scope="col">Interest</th>
                <th scope="col">Total Repayment</th>
              </tr>
            </thead>
            <tbody>
              {dates.map((date, index) => (
                <tr key={index}>
                  <td>{date}</td>
                  <td>{getPrincipal()}</td>
                  <td>{getInterest()}</td>
                  <td>{getTotalRepayment()}</td>
                </tr>
              ))}
              <tr>
                <td>Total</td>
                <td>{loan}</td>
                <td></td>
              </tr>
            </tbody>
          </table>
        </div>
      </main>
    </React.Fragment>
  );
}

export default App;

我似乎无法在每次计算中获得剩余贷款。