Javascript (react) 计算器取决于中间值

Question

我正在尝试制作一个简单的（可能）反应计算器，运费增加取决于距离。但我现在确实堆积如山。
假设这辆车每次都会从市中心开到郊区。汽车将从起点取走包裹并将其运送到终点。离市区越远，单价越高mile\km.

我的变量：x：起点，y：终点，n：每 1 的成本 mile\km（n = 1,2,3 只是为了更好的解释，所以 n+1 在这里不起作用，稍后我想将其更改为 .24 cents\points 或其他）

预期结果：

示例：如果 x = 10, y = 25 那么成本 = 30 $ \ 点 \ 随便 (5 + 10 + 15 => 因为介于 (
5 和 15) n = 1, 在 (
之间 15 和 20) n = 2 和介于 (
20 和 25) n = 3 ..如果我们要走更长的距离，依此类推)

实际结果：取决于<=和&&或|| “if”中的语句正在计算成本..

第一个例子：取决于更高的价格 (n)，所以玩家将被收费..就像他从更高、最有价值的距离开始（如果 x = 10，y = 25 那么成本 = 45 因为 n 在 20 和 25 之间 = 3)
第二个例子：取决于较低的价格（x = 10，y = 25 => 成本 = 15）
可能我遗漏了一些反应或一些数学逻辑，但无法意识到我到底需要做什么，我在我的宠物项目的这一部分浪费了很多时间，所以这是有史以来第一次我正在寻求帮助 :) 感谢您的提前！

我也不明白为什么有时我需要点击按钮两次来更新 useState..

我为您准备的代码沙箱https://codesandbox.io/s/distance-react-calc-on-states-rjuek

如果您想在此处查看代码：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

function App() {
  const [x, setX] = useState(5);
  const [y, setY] = useState(10);
  const [n, setN] = useState(null); // n - the cost value per 1 mile/km
  const [total, setTotal] = useState((y - x) * n);

  function calculateTotal() {
    if (x <= 5 && y < 15) {
      setN(1);
      setTotal((y - x) * n);
    } else if (x <= 15 && y < 20) {
      setN(2);
      setTotal((y - x) * n);
    } else if (x <= 20 && y <= 25) {
      setN(3);
      setTotal((y - x) * n);
    } else if (x <= 25 && y < 30) {
      setN(4);
      setTotal((y - x) * n);
    } else if (30 <= x && y < 35) {
      setN(5);
      setTotal((y - x) * n);
    } else if (35 <= x && y < 40) {
      setN(6);
      setTotal((y - x) * n);
    }
    return calculateTotal;
  }

  return (
    <div className="Calc">
      <div className="number-inputs">
        <input
          type="number"
          step="1"
          value={x}
          onChange={(e) => setX(+e.target.value)}
        />
        <input
          type="number"
          step="1"
          value={y}
          onChange={(e) => setY(+e.target.value)}
        />
      </div>

      <button onClick={calculateTotal}>Calc</button>

      <h2 id="currentDistance">{total}</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

 setN(1);
 setTotal((y - x) * n)

React 以虚拟 DOM 的思想工作，因此即使你将两个 set 函数一个接一个地放在上面，到 setTotal((y - x) * n) 执行时 n 值可能是之前的状态是 null。这就是你需要按两次按钮的原因。

因此，假设您不会在前面的语句中立即获得该值，那么编写任何使用 setState 的逻辑。

例如：

 setN(1);
 setTotal((y - x) * 1)

Javascript (react) 计算器取决于中间值

Javascript (react) calculator depends on in between values

javascript

reactjs

react-hooks

calculator

distance