如何为在 React 中构建的用户输入计算器应用程序重构此代码？ 很简单(:*专业提示：*

如何解决如何为在 React 中构建的用户输入计算器应用程序重构此代码？ 很简单(:*专业提示：*

以下是我目前的代码（这里是沙箱 https://codesandbox.io/s/nice-kirch-i1y58?file=/src/App.js:253-1766).

我的具体重构问题是如何不在 clickHandler 和输出框中复制方程 Math.pow(0.01 * variableTwo * (460 + 26 * variableOne),1.5。单击处理程序的功能是获取输出字段中的任何值，并将其用作第二个方程的新变量（输出一个变量）。但我不知道该怎么做，所以我只是默认在点击句柄期间再次使用该方程。

export default function App() {


  const [variableOne,setVariableOne] = useState(0);
  const [variableTwo,setVariableTwo] = useState(0);
  const [outputOneVariable,setOutputOneVariable] = useState(0);
  const [link,setLink] = useState(false);

  const clickHandler = () => {
    setOutputOneVariable(
      Math.pow(0.01 * variableTwo * (460 + 26 * variableOne),1.5)
    );
    setLink(!link);
  };

  return (
    <div className="calculator-page">
      <h1>My Calculator</h1>
      <h3>Calculation One</h3>
      <div className="calculator-one">
        <UserInput
          label="Variable One"
          value={variableOne}
          onChange={(e) => setVariableOne(e.target.value)}
        />
        <UserInput
          label="Variable Two"
          value={variableTwo}
          onChange={(e) => setVariableTwo(e.target.value)}
        />
        <Output
          title="Output One"
          value={Math.pow(0.01 * variableTwo * (460 + 26 * variableOne),1.5)}
        />
      </div>

      {link ? (
        <LinkOn onClick={clickHandler} />
      ) : (
        <LinkOff onClick={clickHandler} />
      )}

      <h3>Calculation Two</h3>

      <div className="calculator-two">
        <UserInput
          label="Output One Variable"
          value={outputOneVariable}
          onChange={(e) => setOutputOneVariable(e.target.value)}
        />

        <Output
          title="Output Two"
          value={0.0775 * Math.pow(outputOneVariable,0.46)}
        />
      </div>
    </div>
  );
}

解决方法

您也可以将 Math 计算的输出保存到状态中，然后仅在 useEffect 更改 variableOne 或 variableTwo 时才更新它。

  const [outputOneCalc,setOutputOneCalc] = useState(0);

  useEffect(() => {
    setOutputOneCalc(Math.pow(
      0.01 * variableTwo * (460 + 26 * variableOne),1.5
    ));
  },[variableOne,variableTwo]);

然后您可以从点击处理程序和 JSX 中删除计算：

const clickHandler = () => {
    setOutputOneVariable(outputOneCalc);
    setLink(!link);
};

JSX：

<Output
          title="Output One"
          value={outputOneCalc}
        />

https://codesandbox.io/s/pensive-mendeleev-1tbqp?file=/src/App.js

,

编辑：

迈克的答案是首选和更好的答案。
（您仍然可以阅读我的答案，因为它提供了另一种解决方案+您也可以从中学习）

原答案：

很简单(:

您可以将计算逻辑移动到一个单独的函数中， 这将在组件范围级别。 我们称之为**calculateOutputOneVariable()**。 （虽然我建议你做一些重命名的工作， 因为*“输出一”* & *“输出二”* 至少对我来说没有任何意义）。

在那个单独的函数中，您将像这样实现计算逻辑：

const calculateOutputOneVariable = () => (
    Math.pow(0.01 * variableTwo * (460 + 26 * variableOne),1.5)
);

然后你可以在 clickHandler() 中使用它并作为输出 value 属性：

const clickHandler = () => {
    setOutputOneVariable(calculateOutputOneVariable());
    setLink(!link);
};

...

return (
    ...
        ...
        <Output
            title="Output One"
            value={calculateOutputOneVariable()}
        />
        ...
    ...
);

*专业提示：*

将第二个内联计算也移动到一个单独的函数中（即使它只写了一次）。 如果您命名一些逻辑而不是按原样抛出它，它将更清晰，更具可读性。

所以，来自：

<Output
  title="Output Two"
  value={0.0775 * Math.pow(outputOneVariable,0.46)}
/>

它会变成：

<Output
  title="Output Two"
  value={calculateAnotherValue()} // You should ofcourse name it differently
/>