如果它们的值与反应钩子相互依赖，如何同时更新多个状态

Question

我有一个按钮，点击按钮后我需要更新几个状态。其他州，如 Salary 或 employerCompensationDays/insuranceCompensationDays 我确实更新了并且它有效。我将 useState 与一个对象一起使用来更新多个状态，但它们的值相互依赖，因此我需要多次单击才能更新所有状态。我怎么能一键更新所有这些？

import React from "react";
import { useState } from "react";

const Calculator = () => {
  const [salary, setSalary] = useState(0);
  const [employerCompensationDays, setEmployerCompensationDays] = useState(0);
  const [insuranceCompensationDays, setInsuranceCompensationDays] = useState(0);
  const [compensation, setCompensation] = useState({ dayliAllowance: 0, emoloyerCompensation: 0, insuranceCompensation: 0, compensationTotal: 0 })


  const handleCompensation = () => {
    setCompensation({
      dayliAllowance: ((salary / 20) / 100) * 70,
      emoloyerCompensation: compensation.dayliAllowance * employerCompensationDays,
      insuranceCompensation: compensation.dayliAllowance * insuranceCompensationDays,
      compensationTotal: compensation.emoloyerCompensation + compensation.insuranceCompensation
    })
  }
  return (
    <div>
      <button onClick={handleCompensation} className="calculator-btn" type='button'>Calculate</button>
    </div>
  )
}

export default Calculator;

Answer 1

对于这种情况，我会使用 useMemo 而不是 state，因为您操纵的唯一值是薪水。

您这样做的缺点是，设置状态 4 次将意味着您将 re-render 最少 4 次。

以下方法只渲染一次。

const updateSalary = (amount) => {
     .... some some stuff
     setSalary(finalamount) //this will trigger useMemo below.
} 
const calculated = useMemo(() => {
      const dayliAllowance = ((salary / 20) / 100) * 70;
      const emoloyerCompensation = dayliAllowance * employerCompensationDays;
      const insuranceCompensation = dayliAllowance * insuranceCompensationDays,
      const compensationTotal =compensation.emoloyerCompensation + insuranceCompensation

      return { dayliAllowance, emoloyerCompensation, insuranceCompensation, compensationTotal } 

},[salary]) //when salary changes, this will be recalculated

     return <div>{calculated.daliAllowance}</div> //example

Answer 2

我觉得分开计算的话，一键设置状态就可以了

import React from "react";
import { useState } from "react";

const Calculator = () => {
  const [salary, setSalary] = useState(0);
  const [employerCompensationDays, setEmployerCompensationDays] = useState(0);
  const [insuranceCompensationDays, setInsuranceCompensationDays] = useState(0);
  const [compensation, setCompensation] = useState({
    dayliAllowance: 0,
    emoloyerCompensation: 0,
    insuranceCompensation: 0,
    compensationTotal: 0
  });

const calculate = () => {
    const dayliAllowance = (salary / 20 / 100) * 70;
    const emoloyerCompensation = dayliAllowance * employerCompensationDays;
    const insuranceCompensation = dayliAllowance * insuranceCompensationDays;
    const compensationTotal = emoloyerCompensation + insuranceCompensation;

    return {
      dayliAllowance,
      emoloyerCompensation,
      insuranceCompensation,
      compensationTotal
    };
  };

  const handleCompensation = () => {
    const result = calculate();

    setCompensation({
      ...result
    });
  };

  return (
    <div>
      <button
        onClick={handleCompensation}
        className="calculator-btn"
        type="button"
      >
        Calculate
      </button>
    </div>
  );
};

export default Calculator;

如果它们的值与反应钩子相互依赖，如何同时更新多个状态

How to update several states at the same time if their value depend on each other with react hooks

asynchronous

calculator

reactjs

react-hooks

use-state