将变量的值设置为另一个变量的先前状态值

Posted 2023-02-21

【中文标题】将变量的值设置为另一个变量的先前状态值

【英文标题】：Setting the value of a variable as previous state value of another variable

【发布时间】：2019-05-23 05:47:40

【问题描述】：

我是 reactjs 的新手，在我的代码中，我试图将表单中的起始余额值分配为上一条记录的期末余额。表单的初始值是 API 调用的响应（在 get_schedule 数组中定义）。初始起始余额是总本金并且是静态的。用户可以更改本金和利息金额，从而导致EMI金额、期末余额、起始余额和本息总额。我想知道我必须如何处理起始余额的值。

import React,  Component  from "react";
import ReactDOM from "react-dom";

import "./styles.css";
class App extends Component 
  constructor(props) 
    super();
    this.state = 
      get_interest: 5,
      get_principal: 5,
      get_starting_balance: 10,
      get_closing_balance: 0,
      get_emi_date: "2018-09-12",
      get_emi_amount: 0,
      field: "",
      get_schedule: [
        
          amount: 5151,
          closing_balance: 5050,
          date: "2019-02-03",
          discount: 0,
          interest: 200,
          principal: 4951,
          starting_balance: 10000
        ,
        
          amount: 5151,
          closing_balance: 0,
          date: "2019-03-03",
          discount: 0,
          interest: 101,
          principal: 5050,
          starting_balance: 5050
        
      ]
    ;
  
  handleAmortScheduleChange = (key, field) => e => 
    const value = e.target.value;
    const  get_schedule, get_emi_amount  = this.state;
    const old_schedule = get_schedule[key];
    const new_get_schedule = [...get_schedule];
    new_get_schedule[key] = 
      ...old_schedule,
      [field]: value,
      amount: get_emi_amount,
      closing_balance: old_schedule.starting_balance - get_emi_amount
    ;

    this.setState(
      get_schedule: new_get_schedule,
      get_emi_amount:
        parseInt(new_get_schedule[key].principal) +
        parseInt(new_get_schedule[key].interest)
    );
    var arr = document.getElementsByName("get_schedule_principal_here");
    var tot = 0;
    for (var i = 0; i < arr.length; i++) 
      if (parseInt(arr[i].value)) tot += parseInt(arr[i].value);
    
    document.getElementById("get_total_principal").value = tot;
    var arr_interest = document.getElementsByName("get_schedule_interest_here");
    var tot_interest = 0;
    for (var i = 0; i < arr_interest.length; i++) 
      if (parseInt(arr_interest[i].value))
        tot_interest += parseInt(arr_interest[i].value);
    
    document.getElementById("get_total_interest").value = tot_interest;
  ;
  render() 
    const  get_schedule, get_emi_amount  = this.state;
    return (
      <div className="App">
        this.state.get_schedule.map((row, key) => (
          <div key=key className="row aaaa">
            <div className="getAmort-form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
              <input
                ref="get_schedule_emi_date"
                type="date"
                required="required"
                id="get_schedule_emi_date"
                value=row.date
              />
              <label for="input" className="getAmort-control-label">
                EMI Date
              </label>
              <i className="getAmort-bar" />
            </div>
            <div className="getAmort-form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
              <input
                ref="get_schedule_emi_amount"
                type="number"
                required="required"
                id="get_schedule_emi_amount"
                value=get_schedule[key].amount
              />
              <label for="input" className="getAmort-control-label">
                EMI Amount
              </label>
              <i className="getAmort-bar" />
            </div>
            <div className="getAmort-form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
              <input
                ref="get_schedule_principal"
                type="number"
                required="required"
                id="get_schedule_principal"
                name="get_schedule_principal_here"
                value=get_schedule[key].principal
                onChange=this.handleAmortScheduleChange(key, "principal")
                onKeyUp=this.handleAmortScheduleChange(key, "principal")
              />
              <label for="input" className="getAmort-control-label">
                Principal
              </label>
              <i className="getAmort-bar" />
            </div>
            <div className="getAmort-form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
              <input
                ref="get_schedule_interest"
                type="number"
                required="required"
                id="get_schedule_interest"
                value=get_schedule[key].interest
                onChange=this.handleAmortScheduleChange(key, "interest")
                onKeyUp=this.handleAmortScheduleChange(key, "interest")
              />
              <label for="input" className="getAmort-control-label">
                Interest
              </label>
              <i className="getAmort-bar" />
            </div>
            <div className="getAmort-form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
              <input
                ref="get_schedule_starting_balance"
                type="number"
                required="required"
                id="get_schedule_starting_balance"
                value=row.starting_balance
              />
              <label for="input" className="getAmort-control-label">
                Starting Balance
              </label>
              <i className="getAmort-bar" />
            </div>
            <div className="getAmort-form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
              <input
                ref="get_schedule_closing_balance"
                type="number"
                required="required"
                id="get_schedule_closing_balance"
                value=get_schedule[key].closing_balance
              />
              <label for="input" className="getAmort-control-label">
                Closing Balance
              </label>
              <i className="getAmort-bar" />
            </div>
          </div>
        ))
        <div className="row">
          <div className="getAmort-form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
            <input type="number" required="required" id="get_total_principal" />
            <label for="input" className="getAmort-control-label">
              Total Principal
            </label>
            <i className="getAmort-bar" />
          </div>

          <div className="getAmort-form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
            <input type="number" required="required" id="get_total_interest" />
            <label for="input" className="getAmort-control-label">
              Total Interest
            </label>
            <i className="getAmort-bar" />
          </div>
        </div>
      </div>
    );
  

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

我想在handleAmortScheduleChange 函数中实现类似的东西：

if(key>0) this.state.new_get_schedule.starting_balance = parseInt(this.state.new_get_schedule[key-1].closing_balance); 工作代码的链接是https://codesandbox.io/s/w8x9j9o15。

【问题讨论】：

你应该使用reduce来管理和存储你的状态。

【参考方案1】：

如果你像 DOM wtf 一样看待它，你为什么还要使用 react，谁告诉你使用 getElementById 等。 网上有很多简单的例子可以做这样简单的事情，我很惊讶你是怎么想出这个的

输入应该有一个连接到状态的值，你用 onChange 更新状态并且值会改变因为它会监听状态的变化 没有阅读文档的问题 ppl 偶然发现，更改将落后 1 步，因为 setState 不会立即更新 - 它不是同步的。因此，一旦完成更新状态，您就必须使用 setState 的第二个参数或其他方法来执行

codesandbox

【讨论】：

我同意你的看法。尽管我在示例中尝试使用回调函数但无法使其正常工作，但我需要更多的反应练习。但是，我的问题是我应该如何处理这里的起始余额值？我尝试使用 setState 将期末余额的值分配给期初余额，但它不起作用。起始余额的值应该是从第二次出现起始余额起的期末余额的前一个值。

设置状态的函数中有多个参数，其中一个是之前的状态