如何在反应中动态添加表格行？

Question

我目前正在使用 React 制作税收计算器应用程序，我想根据用户从类型范围的输入中选择的持续时间向表中添加多行。每行将显示还款日期和由用户想要获得的贷款金额以及利率计算的相应值。我目前正在使用带有 React 的 bootstrap v5。

我的想法是，当用户设置持续时间时，我会创建一个函数来创建日期数组并将其映射。但是，我担心的是，如果用户随后更改了持续时间，表格是否会根据更改添加或删除行？

Answer 1

您可以使用useEffect 挂钩在用户每次更改持续时间值时创建一个日期数组。然后你可以简单地通过这个数组映射来显示所需的行数。

这意味着您不需要设置“今天”日期，因为它将在这个 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;