在React中设置状态后访问更新的值

Question

该组件呈现总和，该总和是由先前值计算的。

我知道批次是如何工作的以及为什么。我可以通过实现按钮并将按钮连接到单击事件处理程序来解决此问题，但是我想在计算（）funciton中使用Onchange事件计算总和。

因此，我想在相同功能中处理设定状态和计算过程。

因此，我的Quiestion是如何获得NUM1和NUM2的更新值，NUM1和NUM2在同一批次中进行了更新：

setSum(parseFloat(**Updated**num1) + parseFloat(**Updated**num2))

-

export default function Home() {
  const [num1 , SetNum1] = useState(0.0)
  const [num2 , setNum2] = useState(0.0)
  const [sum, setSum] = useState(0.0)


  const calculate = (e) => {
    switch(e.target.id){
      case 'num1':
        SetNum1((prev) => {
          return e.target.value
        })
        break;
      case 'num2':
        setNum2((prev) => {
          return e.target.value
        })
        break;
    }
    setSum(parseFloat(num1) + parseFloat(num2))
  }

  return (
    <div>
      <form>
        <input type="number" className="form-control"  id="num1" value={num1} onChange={(e) => calculate(e)}  />
        <input type="number" className="form-control"  id="num2" value={num2} onChange={(e) => calculate(e)}  />
        Sum : {sum}
      </form>
    </div>
  )
}

可以在SETNUM1之后访问最新的NUM1值，还是我必须实现一个计算总和的按钮？

Answer 1

您想收听使用效果的更改。

export default function Home() {
  const [num1 , setNum1] = useState(0.0)
  const [num2 , setNum2] = useState(0.0)
  const [sum, setSum] = useState(0.0)


  // execute the function whe num1 or num2 is changed
  useEffect(() => {
    setSum(parseFloat(num1) + parseFloat(num2))
  }, [num1, num2]);

  return (
    <div>
      <form>
        <input type="number" className="form-control"  id="num1" value={num1} onChange={(e) => setNum1(e.target.value)}  />
        <input type="number" className="form-control"  id="num2" value={num2} onChange={(e) => setNum2(e.target.value)}  />
        Sum : {sum}
      </form>
    </div>
  )
}

Answer 2

您不需要将总和保持状态。由于它是从其他两个状态变量得出的，因此您可以并且应该在每个渲染上进行计算：

import { useState } from 'react';

export default function Home() {
  const [num1 , SetNum1] = useState(0.0)
  const [num2 , setNum2] = useState(0.0)
  const sum = parseFloat(num1) + parseFloat(num2)


  const calculate = (e) => {
    switch(e.target.id){
      case 'num1':
        SetNum1((prev) => {
          return e.target.value
        })
        break;
      case 'num2':
        setNum2((prev) => {
          return e.target.value
        })
        break;
    }
  }

  return (
    <div>
      <form>
        <input type="number" className="form-control"  id="num1" value={num1} onChange={(e) => calculate(e)}  />
        <input type="number" className="form-control"  id="num2" value={num2} onChange={(e) => calculate(e)}  />
        Sum : {sum}
      </form>
    </div>
  )
}

这是最简单，最有效的解决方案。也不需要使用。

这是更多的解释和一个可运行的示例： https：// react .dev/learn/choosing-the-state-structure#avoid-redundant-state