为什么React中连续调用两次setState时第二次状态不更新？

1. React的状态更新为异步批量处理逻辑，你在changeCalculation中连续两次调用setCalcInfo，两次调用读取的都是当前作用域下的旧calcInfo值，第一次的属性更新操作会被第二次的状态更新完全覆盖，导致滑块修改的数值始终无法生效。
2. calculateResult函数内部直接读取了闭包中的旧calcInfo值，没有拿到修改后的最新参数，计算出的financial_data也始终基于默认初始值。

将两次状态更新合并为一次，先构造修改完属性的新状态对象，再用新对象计算财务数据，统一提交状态更新；同时修改calculateResult为接收状态对象作为入参，避免闭包陷阱。

修改后代码示例 #

1. 调整changeCalculation逻辑 #

const changeCalculation = (value, property) => {
  console.log("-- hallo")
  // 构造更新了指定属性的新状态
  const updatedCalcInfo = {
    ...calcInfo,
    [property]: value
  }
  // 用新状态计算财务数据
  const newFinancialData = calculateResult(updatedCalcInfo)
  // 统一提交一次状态更新
  setCalcInfo({
    ...updatedCalcInfo,
    financial_data: newFinancialData
  })
}

2. 改造calculateResult函数接收入参 #

// 新增入参接收计算用的状态数据
const calculateResult = (calcInfoData) => {
  const initial_investment = calcInfoData.initial_investment
  const contribution_per_month = calcInfoData.monthly_contribution
  const contribution_per_year = contribution_per_month * 12
  const years = calcInfoData.length_of_time_years
  const interest_rate = parseFloat(calcInfoData.interest_rate_per_year)
  let result = initial_investment

  const years_interests = []
  const years_results = []

  for (let year = 0; year < years; year++) {
    result += contribution_per_year
    result = result / 100 * (100 + interest_rate)

    years_interests.push(year)
    years_results.push(result)
  }

  return {
    labels: years_interests,
    datasets: [{
        label: 'Vermögensentwicklung über gewählten Zeitraum',
        data: years_results,
    }]
  }
}

内容的提问来源于stack exchange，提问作者Maurice