Reactjs 反应设置状态未正确更新

我正在开发一个收入/支出应用程序，允许用户输入数据并从下拉列表中选择INC/EXP类型

我遇到的问题是我的总收入（一旦我解决了这个问题，总费用就会出现）落后1步更新，我的项目百分比落后2步

输入示例：说明：项目1金额：500类别：收入 产出：总收入500%收入百分比：100%

输入2：项目2金额：250类别：包括销售额 产出2：总收入500已收入百分比：67% 总销售额250销售百分比：33%

   import React, { Component } from 'react';
   import IncomeList from './components/IncomeList';
   import ExpenseList from './components/ExpenseList';
   import AddItem from './components/AddItem';
   import Chart from './components/Chart';
   import './App.css';

   class App extends Component {
constructor(){
    super()
    this.state = {
        incomeItems: [],
        expenseItems: [],
        totalIncome: 0,
        totalExpense: 0,
        color: 'black',
        incEarned: 0,
        incInvest: 0,
        incSales: 0,
        incRe: 0,
        incServices: 0,
        incOther: 0,
        incEarnedPCT: 0,
        incInvestPCT: 0,
        incSalesPCT: 0,
        incRePCT: 0,
        incServicesPCT: 0,
        incOtherPCT: 0
    }
    this.addBudgetItem = this.addBudgetItem.bind(this); 
    this.addExpenseItem = this.addExpenseItem.bind(this);
    this.deleteIncomeItem = this.deleteIncomeItem.bind(this);
    this.deleteExpenseItem = this.deleteExpenseItem.bind(this);
}

addBudgetItem (item, amount, category) {
    let newIncomeTotal = this.state.totalIncome + parseInt(amount);
    this.setState({
        incomeItems: [...this.state.incomeItems, {item: item, amount: amount, category: category}],
        totalIncome: newIncomeTotal
    })
    const newIncList = this.state.incomeItems;
    let incEarned = this.state.incEarned;
    let incInvest = this.state.incInvest;
    let incSales = this.state.incSales;
    let incRe = this.state.incRe;
    let incServices = this.state.incServices;
    let incOther = this.state.incOther;

    let incEarnedPCT = 0;
    let incInvestPCT = 0;
    let incSalesPCT = 0;
    let incRePCT = 0;
    let incServicesPCT = 0;
    let incOtherPCT = 0;

    newIncList.map((item) => {
        if(item.category === 'earned'){
            incEarned += parseInt(item.amount);
            incEarnedPCT = incEarned/parseInt(this.state.totalIncome);
        } else if (item.category === 'invest'){
            incInvest += parseInt(item.amount);
            incInvestPCT = incInvest/parseInt(this.state.totalIncome);
        } else if (item.category === 'sales'){
            incSales += parseInt(item.amount);
            incSalesPCT = incSales/parseInt(this.state.totalIncome);
        } else if (item.category === 're'){
            incRe += parseInt(item.amount);
            incRePCT = incRe/parseInt(this.state.totalIncome);
        } else if (item.category === 'services'){
            incServices += parseInt(item.amount);
            incServicesPCT = incServices/parseInt(this.state.totalIncome);
        } else {
            incOther += parseInt(item.amount);
            incOtherPCT = incOther/parseInt(this.state.totalIncome);
        }
        this.setState({
            incEarnedPCT: incEarnedPCT,
            incInvestPCT: incInvestPCT,
            incSalesPCT: incSalesPCT,
            incRePCT: incRePCT,
            incServicesPCT: incServicesPCT,
            incOtherPCT: incOtherPCT
        })
    })
    console.log(`Earned: ${incEarned}  PCT: ${this.state.incEarnedPCT}\n Invest: ${incInvest} PCT: ${this.state.incInvestPCT}\n Sales: ${incSales} PCT: ${this.state.incSalesPCT}\n Real Estate: ${incRe} PCT: ${this.state.incRePCT}\n Services: ${incServices} PCT: ${this.state.incServicesPCT}\n Other: ${incOther} PCT: ${this.state.incOtherPCT}`);

    }


     render() {

return (
  <div className="App">
    <header className="App-header">
      <h1 className="App-title">Monthly Budget</h1>
    </header>

    <div className="container">
        <AddItem addBudgetItem={this.addBudgetItem} addExpenseItem={this.addExpenseItem}/>
        <div className="line"></div>
        <div className="UIdiv"> 
            <table>
                <h1>INCOME ITEMS</h1>
                <tr><IncomeList incomeList={this.state.incomeItems} deleteIncomeItem={this.deleteIncomeItem}/></tr>
                <p className="income-desc">Total Income: {this.state.totalIncome}</p>
            </table>
            <table>
                <h1>EXPENSE ITEMS</h1>
                <tr><ExpenseList expenseList={this.state.expenseItems} deleteExpenseItem={this.deleteExpenseItem}/></tr>
                <p className="expense-desc">Total Expense: {this.state.totalExpense} </p>
            </table>

    <h2 style={(this.state.totalIncome - this.state.totalExpense === 0) ? {color: 'black'}: (this.state.totalIncome > this.state.totalExpense) ? {color:'green'}:{color:'red'}}> TOTAL BALANCE: {this.state.totalIncome - this.state.totalExpense}</h2>
        </div>
    </div>
    <div>
    <Chart />
    </div>
 </div>
);
     }
  }

     export default App;

import React，{Component}来自'React'；
从“./components/IncomeList”导入IncomeList；
从“./components/ExpenseList”导入ExpenseList；
从“./components/AddItem”导入附加项；
从“./components/Chart”导入图表；
导入“/App.css”；
类应用程序扩展组件{
构造函数（）{
超级（）
此.state={
收入项目：[]，
支出项目：[]，
总收入：0，
总费用：0，
颜色：'黑色'，
激励：0，
incInvest:0，
销售额：0，
增量：0，
INC服务：0，
除其他外：0，
自学习PCT:0，
意外：0，
incSalesPCT:0，
增量：0，
incServicesPCT:0，
收入百分比：0
}
this.addBudgetItem=this.addBudgetItem.bind（this）；
this.addExpenseItem=this.addExpenseItem.bind（this）；
this.deleteIncomeItem=this.deleteIncomeItem.bind（this）；
this.deleteExpenseItem=this.deleteExpenseItem.bind（this）；
}
addBudgetItem（项目、金额、类别）{
让newIncomeTotal=this.state.totalIncome+parseInt（金额）；
这是我的国家({
incomeItems:[…this.state.incomeItems，{item:item，amount:amount，category:category}]，
总收入：新收入总额
})
const newIncList=this.state.incomeItems；
让incEarned=this.state.incEarned；
让incInvest=this.state.incInvest；
让incSales=this.state.incSales；
让incRe=this.state.incRe；
让incServices=this.state.incServices；
让incOther=this.state.incOther；
设incEarnedPCT=0；
设incinvestct=0；
设incSalesPCT=0；
设incrempct=0；
设incServicesPCT=0；
设incOtherPCT=0；
newIncList.map（（项目）=>{
如果（item.category===‘挣来的’）{
incEarned+=parseInt（项目金额）；
incEarnedPCT=incEarned/parseInt（this.state.totalIncome）；
}否则如果（item.category==='invest'）{
incInvest+=parseInt（项目金额）；
incinvestct=incInvest/parseInt（this.state.totalIncome）；
}else if（item.category==‘sales’）{
incSales+=parseInt（项目金额）；
incSalesPCT=incSales/parseInt（this.state.totalIncome）；
}else if（item.category=='re'）{
增量+=parseInt（项目金额）；
incrempct=incr/parseInt（this.state.totalIncome）；
}else if（item.category===“服务”）{
incServices+=parseInt（项目金额）；
incServicesPCT=incServices/parseInt（this.state.totalIncome）；
}否则{
incOther+=parseInt（项目金额）；
incOtherPCT=incOther/parseInt（this.state.totalIncome）；
}
这是我的国家({
激励PCT：激励PCT，
incinvestct：incinvestct，
incSalesPCT:incSalesPCT，
增量：增量，
incServicesPCT:incServicesPCT，
incOtherPCT：incOtherPCT
})
})
console.log（`owned:${incarned}PCT:${this.state.incarnedpct}\n Invest:${incInvest}PCT:${this.state.incinvestct}\n Sales:${incSales}PCT:${this.state.incSalesPCT}\n Real Estate:${increment}PCT:${this.state.increservices}\n服务：${this.state.incServicesPCT}；
}
render（）{
返回(
月预算
收入项目
总收入：{this.state.totalIncome}

费用项目
总费用：{this.state.totalExpense}

this.state.totalExpense）{color:'green'}:{color:'red'}>总余额：{this.state.totalIncome-this.state.totalExpense}
);
}
}
导出默认应用程序；

。状态更新是异步的。如果后面的代码行依赖于新状态，请确保使用带有setState的回调来解释这一点

this.setState的签名是this.setState（更新、回调），因此您可以这样编写代码：

addBudgetItem (item, amount, category) {
  let newIncomeTotal = this.state.totalIncome + parseInt(amount);
    this.setState({
      incomeItems: [...this.state.incomeItems, {item: item, amount: amount, category: category}],
      totalIncome: newIncomeTotal
    }, () => {

      // Later lines of code should go here

    })
}

。状态更新是异步的。如果后面的代码行依赖于新状态，请确保使用带有setState的回调来解释这一点

this.setState的签名是this.setState（更新、回调），因此您可以这样编写代码：

addBudgetItem (item, amount, category) {
  let newIncomeTotal = this.state.totalIncome + parseInt(amount);
    this.setState({
      incomeItems: [...this.state.incomeItems, {item: item, amount: amount, category: category}],
      totalIncome: newIncomeTotal
    }, () => {

      // Later lines of code should go here

    })
}

---

@拉希德没问题，伙计！如果我的答案真的有帮助的话，请随意接受我的答案@拉希德没问题，伙计！如果我的答案真的有帮助的话，请随意接受我的答案