你可以使用 useEffect 钩子在用户每次更改持续时间值时创建一个日期数组。然后，您可以简单地Map这个数组以显示所需的行数。
这意味着您不需要设置“今天”日期，因为它将在第一次渲染之前运行的useeffect挂钩中设置。
最终的代码应该如下所示：

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

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

    const getInterest = () => {
        let interestedAmount = (loan * interest) / 100;
        interestedAmount /= duration;
        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 getInterest() + getPrincipal();
    };

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

        for (let i = 0; i < duration; i++) {
            let date = new Date();
            date = new Date(date.setMonth(date.getMonth() + 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 (£) : {loan}
                            </label>
                        </div>
                        <div className='col-auto'>
                            <input
                                type='range'
                                value={loan}
                                min='1000'
                                max='200000'
                                step='1000'
                                className='form-range'
                                id='loan-input'
                                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) : {duration}
                            </label>
                        </div>
                        <div className='col-auto'>
                            <input
                                type='range'
                                value={duration}
                                min='1'
                                max='60'
                                step='1'
                                className='form-range'
                                id='duration-input'
                                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}
                            min='0'
                            max='10'
                            step='1'
                            className='form-range'
                            id='interest-range'
                            onChange={(e) => setInterest(e.target.value)}
                        />
                    </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>
                            ))}
                        </tbody>
                    </table>
                </div>
            </main>
        </React.Fragment>
    );
}

export default App;