为什么修改React state对象属性时，改第二个属性第一个就重置？

• 你将状态更新方法changeCalculation直接存放在了state的初始对象中，该方法在初始化时就闭包捕获了第一次渲染的初始calcInfo值。后续所有调用这个方法更新状态时，都是基于初始值展开修改，之前修改的其他属性自然会被覆盖回默认值。
• state本质上应该只存储业务相关的纯数据字段，更新方法不需要存放在state内部，属于不合理的设计问题。

将更新方法从state中抽离，同时使用setState的函数式更新写法避免闭包捕获旧值问题，修复后的代码如下：

1. 修复CalculatorProvider逻辑 #

const CalculatorContext = React.createContext();
const CalculatorProvider = (props) => {
  // state仅存放纯数据字段
  const [calcInfo, setCalcInfo] = useState({
    initial_investment: 10000,
    monthly_contribution: 1000,
    length_of_time_years: 40,
    interest_rate_per_year: 7,
    result: 2636200,
  });

  // 更新方法抽离到Provider内部，不存入state
  const changeCalculation = (value, property) => {
    // 函数式更新保证每次基于最新的状态修改，彻底规避闭包旧值问题
    setCalcInfo(prevState => ({...prevState, [property]: value}));
  }

  // 组装context的值，包含数据和更新方法
  const contextValue = {
    ...calcInfo,
    changeCalculation
  }

  return (
    <CalculatorContext.Provider value={contextValue}>
      {props.children}
    </CalculatorContext.Provider>
  )
}

2. 滑块控件代码无需修改 #

原有滑块的调用逻辑可以直接复用，不需要改动。

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