显示输入数据的乘法计算

Question

我正忙于一个使用 REACT 的项目，遇到了一个问题。我有用户输入数据。我在一些数学公式中使用它，需要在一个 table 中显示所有结果。问题是，result2依赖于result1，result3依赖于result2等等

 input data:
 const [volume, setVolume] = useState(0);
 const [price, setPrice] = useState(0);
 const [fixedCosts, setFixedCosts] = useState(0);

结果：

 const [revenue, setRevenue] = useState(volume * price);
 const [netProfit, setNetProfit] = useState(revenue - fixedCosts);

函数：

function handleFormSubmit(event) {
  event.preventDefault();

  function handleRevenueChange() {
   setRevenue(volume * price);     // both values are from input
  }
  function handleNetProfitChange() {
   setNetProfit(Math.round(revenue - fixedCosts));  // revenue here is result of the first calculations
  }
 }

我检索数据，我可以使用它并显示。这部分有效。我的问题：在第一次提交时，我在第一个公式中计算了“收入”，所以我改变了它的状态，但同时它的当前状态是 0。所以第二个公式什么也没给出。当我第二次按提交时，bcz“收入”已经更新，我可以使用它并计算第二个公式。所以如果我有五个功能，我需要按五次提交，bcz 每个值状态一个一个更新（它们相互依赖）。

如何才能先全部计算出来，然后一键提交才显示所有数据
更妙的是，如果有任何输入而无需按下按钮，如何让数据自动计算和显示？（想过onBlur，不知道怎么用，还是先计算一下）

感谢您的帮助。

Answer 1

您可以通过返回一个 promise 来实现您的目标，然后将此函数与 await.

一起使用

解决方法如下，试试：

function handleFormSubmit(event) {

  event.preventDefault();

  function handleRevenueChange() {
      return new Promise(resolve => {
            setRevenue(volume * price);
            resolve(revenue);
        });
  }

  async function handleNetProfitChange() {
      const resultAsRevenue = await handleRevenueChange;
      setNetProfit(Math.round(resultAsRevenue - fixedCosts));
  }

}

编码愉快:)

Answer 2

我觉得这里可以用useEffect react hook

 function handleFormSubmit(event) {
    event.preventDefault();
    setRevenue(volume * price); 
 }

useEffect(()=>{
setNetProfit(Math.round(revenue - fixedCosts));
},[revenue])

Answer 3

我认为您根本不需要这些行：

const [revenue, setRevenue] = useState(volume * price);
const [netProfit, setNetProfit] = useState(revenue - fixedCosts);

因为 revenue 和 netProfit 取决于组件状态的值，当这些输入值更新时，组件将以最新状态重新渲染，并且您的局部变量 revenue 和 netProfit 也将更新：

例如：

export default function App() {
  const [volume, setVolume] = useState(0);
  const [price, setPrice] = useState(0);
  const [fixedCosts, setFixedCosts] = useState(0);

  // these two variables will update when the state changes
  const revenue = volume * price;
  const netProfit = revenue - fixedCosts;
  
  return (/* render something */);
}

查看工作玩具示例：https://codesandbox.io/s/pedantic-ritchie-8s0jc?file=/src/App.js

显示输入数据的乘法计算

display multiply calculations from input data

javascript

reactjs

use-state