Javascript React.js：首次使用onChange函数中的2个函数并使用上下文API后组件未更新

我一直在尝试使用Node.js上运行的React.js创建一个房屋贷款EMI计算器。我已经使用上下文API实现了状态管理

为了从用户处获取输入，已经实现了三个输入类型范围滑块，其自身的onChange功能如下：

import React, { useContext, useState } from "react";
import LoanContext from "../../context/loan/loanContext";
const Form = () => {
    const loanContext = useContext(LoanContext);
    const {
        loanAmt,
        tenure,
        interestRate,
        setInterest,
        setTenure,
        setLoanAmt,
        setAllItems,
    } = loanContext;

    return (
        <form>
            <p className='range-field'>
                <label htmlFor='loanAmt' style={{ fontSize: "1rem", color: "#333333" }}>
                    LOAN AMOUNT
                    <span className='right'>
                        <b>
                            <u>₹ {loanAmt}</u>
                        </b>
                    </span>
                </label>

                <input
                    type='range'
                    id='loanAmt'
                    min='100000'
                    max='100000000'
                    step='1'
                    onChange={(e) => {
                        //Setting the loan Amount and all other components
                        setLoanAmt(e.target.value);
                        setAllItems(interestRate, loanAmt, tenure);
                        e.preventDefault();
                    }}
                />
                {"₹ 1 Lakh"}
                <span className='right'>{"₹ 10 crore"}</span>
            </p>
            <p className='range-field' style={{ marginTop: "3rem" }}>
                <label htmlFor='tenure' style={{ fontSize: "1rem", color: "#333333" }}>
                    TENURE (YEARS)
                    <span className='right'>
                        <b>
                            <u>{tenure / 12}</u>
                        </b>
                    </span>
                </label>
                <input
                    type='range'
                    id='tenure'
                    min='1'
                    max='30'
                    onChange={(e) => {
                        //Setting the tenure and all other components
                        setTenure(e.target.value);

                        setAllItems(interestRate, loanAmt, tenure);

                        e.preventDefault();
                    }}
                    defaultValue='20'
                    wireModel='rangeSlider'
                />
                {"1"}
                <span className='right'>{"30"}</span>
            </p>
            <p className='range-field' style={{ marginTop: "3rem" }}>
                <label
                    htmlFor='interestRate'
                    style={{ fontSize: "1rem", color: "#333333" }}
                >
                    INTEREST RATE (% Per Annum)
                    <span className='right'>
                        <b>
                            <u>{(interestRate * 1200).toFixed(2)} %</u>
                        </b>
                    </span>
                </label>
                <input
                    type='range'
                    id='interestRate'
                    min='0'
                    max='15'
                    step='0.05'
                    onChange={(e) => {
                        //Setting the interest Rate and all other components
                        setInterest(e.target.value);

                        setAllItems(interestRate, loanAmt, tenure);
                        e.preventDefault();
                    }}
                    defaultValue='15'
                />
                {"0"}
                <span className='right'>{"15"}</span>
            </p>
        </form>
    );
};

export default Form;

import React，{useContext，useState}来自“React”；
从“../../context/loan/LoanContext”导入LoanContext；
常数形式=（）=>{
const loanContext=useContext（loanContext）；
常数{
loanAmt，
任期
利率，
设定利息，
塞特努尔，
setLoanAmt，
setAllItems，
}=借阅文本；
返回(

贷款金额
₹ {loanAmt}
{
//设置贷款金额和所有其他组成部分
setLoanAmt（即目标值）；
设定项目（利息、贷款、使用权）；
e、 预防默认值（）；
}}
/>
{"₹ 10万“}
{"₹ 1千万


任期（年）
{任期/12}
{
//设置任期和所有其他组件
设定值（即目标值）；
设定项目（利息、贷款、使用权）；
e、 预防默认值（）；
}}
defaultValue='20'
wireModel='Range Slider'
/>
{"1"}
{"30"}


利率（年利率%）
{（利率*1200）.toFixed（2）}%
{
//设定利率和所有其他组成部分
设定利息（如目标值）；
设定项目（利息、贷款、使用权）；
e、 预防默认值（）；
}}
defaultValue='15'
/>
{"0"}
{"15"}

);
};
导出默认表单；

我面临的主要问题是，每当我更改任何输入时，所有元素（包括利息金额、贷款金额和总金额）都会使用“来自上下文的状态管理”进行更新，但EMI值会显示更改前的值。每当我再次将输入更改为以前的预期值时，它就会更新

---

我将链接我的，以及一个清晰的图片。

你能摆脱所有的

e.preventDefault（）从您的
onChange
方法。我想你想要输入的默认行为。你能摆脱所有的
e.preventDefault（）吗从您的
onChange
方法。我认为您需要输入的默认行为。