如何计算内部 React 状态？

Question

我目前正在使用 React 制作一个贷款计算器应用程序，我想根据要偿还的剩余金额计算每月利息。

“利息”列每月显示该月末剩余本金总额中的利息，具体取决于利率。例如，如果用户选择贷款金额为 10,000 英镑，期限为 4 个月，利率为 3%。

“本金”列显示请求的贷款总额除以所选月份数（在本例中为 10,000 英镑 / 4 = 2,500 英镑）。

第 1 个月：10000 英镑 * 3% = 300 英镑

第 2 个月：7500 英镑（第 1 个月偿还 10000 英镑 - 2500 英镑）* 3% = 225 英镑

第 3 个月：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;

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

Answer 1

这可能会对您有所帮助。 here is the snippest

import React, { useState, useEffect } from "react";

import "./styles.css";

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

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

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

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

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

    for (let i = 1; i <= duration; i++) {
      let date = new Date();
      date = new Date(date.setMonth(date.getMonth() + 1 + i));
      datesArray.push({
        date: `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`,
        month: i
      });
    }

    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((emi, index) => {
                const { date, month } = emi; 
                return (
                  <tr key={index}>
                    <td>{date}</td>
                    <td>{getPrincipal(month)}</td>
                    <td>{getInterest(month)}</td>
                    <td>{getTotalRepayment(month)}</td>
                  </tr>
                );
              })}
              <tr>
                <td>Total</td>
                <td>{loan}</td>
                <td></td>
              </tr>
            </tbody>
          </table>
        </div>
      </main>
    </React.Fragment>
  );
}