为什么我在 React 状态下只能更改一个对象属性？

Question

我正在尝试在 React 中创建一个利息计算器。我可以使用滑块更改一个属性的值，但是一旦我更改第二个属性值，第一个属性就会重置为默认值。

这是为什么以及如何解决？

const CalculatorContext = React.createContext();
const CalculatorProvider = (props) => {

  const calculatorInformation = {
    initial_investment: 10000,
    monthly_contribution: 1000,
    length_of_time_years: 40,
    interest_rate_per_year: 7,

    result: 2636200,
    changeCalculation: (value, property) => {
      setCalcInfo(
        {...calcInfo, [property]: value}
      );
    }
  }
  const [calcInfo, setCalcInfo] = useState(calculatorInformation);

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

<input type="range" min="0" max="100000" step="1000" value={context.initial_investment}
        onChange={(e) => context.changeCalculation(parseInt(e.target.value), "initial_investment")}></input>

Answer 1

这里的问题是你如何使用 useState 钩子，在一个状态中声明一个函数是反模式的。只需将函数移到状态块之外，一切都会正常工作。

const CalculatorContext = React.createContext();
const CalculatorProvider = (props) => {

  const calculatorInformation = {
    initial_investment: 10000,
    monthly_contribution: 1000,
    length_of_time_years: 40,
    interest_rate_per_year: 7,

    result: 2636200,
    
  }
  const [calcInfo, setCalcInfo] = useState(calculatorInformation);
  
  const changeCalculation = (value, property) => {
      setCalcInfo(
        {...calcInfo, [property]: value}
      );
    }
    
  return (
    <CalculatorContext.Provider value={{calcInfo, changeCalculation}}>
      {props.children}
    </CalculatorContext.Provider>
  )
}

为什么我在 React 状态下只能更改一个对象属性？

Why can I only change one object property in my React state?

javascript

reactjs

use-context

为什么我在 React 状态下只能更改一个对象 属性？

Why can I only change one object property in my React state?

javascript

reactjs

use-context

为什么我在 React 状态下只能更改一个对象属性？