1

我正忙于一个 REACT 项目，但遇到了一个问题。我有用户输入数据。我在一些数学公式中使用它，需要在一张表中显示所有结果。问题是，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 每个值状态都会一一更新（它们相互依赖）。

  1. 如何首先计算所有内容，然后仅通过一个按钮提交显示所有数据。
  2. 更好的是，如果根本不按按钮有任何输入，如何使数据自动计算和显示？（想着onBlur，但不知道怎么用，还是先计算一下）

感谢您的任何帮助。

4

3 回答 3

1

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

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

于 2021-04-08T20:54:36.277 回答
-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));
  }

}

快乐编码:)

于 2021-04-08T20:02:29.897 回答
-1

我认为 useEffect 反应钩子可以在这里使用

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

useEffect(()=>{
setNetProfit(Math.round(revenue - fixedCosts));
},[revenue])
于 2021-04-08T20:09:51.030 回答