如何在react.js中将多个状态函数缩小为一个

Question

import React from "react";
import { AiOutlineArrowDown, AiOutlineArrowUp } from "react-icons/ai";
import { useState } from "react";

const Vote = () => {
  const [num, setnum] = useState(0);

  const numdown = () => {
    num != 0 ? setnum(num - 1) : setnum(num);
  };
  const numup = () => {
    num < 9 ? setnum(num + 1) : setnum(num);
  };
  const [num2, setnum2] = useState(0);

  const numdown2 = () => {
    num2 != 0 ? setnum2(num2 - 1) : setnum(num2);
  };
  const numup2 = () => {
    num2 < 9 ? setnum2(num2 + 1) : setnum2(num);
  };
  var value1 = (
    <>
      <AiOutlineArrowDown onClick={numdown} />
      {num}
      <AiOutlineArrowUp onClick={numup} />
    </>
  );
  var value2 = (
    <>
      <AiOutlineArrowDown onClick={numdown2} />
      {num2}
      <AiOutlineArrowUp onClick={numup2} />
    </>
  );

  return (
    <>
      {value1}
      {value2}
    </>
  );
};

export default Vote;

在此代码中，我有一个代码模板来形成一个投票区域，其中两个投票值具有递增和递减函数。投票值介于 0 到 9 之间，如两个三元运算符函数中所述）。

如何将这段代码缩小为一个状态函数以及具有相同工作原理的递增和递减函数？

Answer 1

这是一个好问题。基本上，您可以使用自定义挂钩处理所有重复的逻辑。

您可以在这里看到一个实例： https: //codesandbox.io/s/affectionate-sunset-7c9lw6 ?file=/src/App.js

在本例中，它将使用一个处理数字 numUp 和 numDown 的钩子。

const useNumber = (baseNunber) => {
  const [state, setState] = React.useState(baseNunber || 0);

  const numUp = (sum = 1) => {
    setState((prev) => prev + sum);
  };

  const numDown = (dec = 1) => {
    setState((prev) => prev - dec);
  };

  return [state, numUp, numDown];
};

您甚至可以进一步定义一个甚至处理 UI 的组件，例如：

const NumberRow = ({ baseNumber }) => {
  const [num, numUp, numDown] = useNumber(baseNumber);

  return (
    <div>
      <button onClick={() => numDown()}>-</button>
      {num}
      <button onClick={() => numUp()}>+</button>
    </div>
  );
};

最后，在代码中使用钩子和/或组件：

export default function App() {
  const [num1, num1Up, num1Down] = useNumber(0);
  const [num2, num2Up, num2Down] = useNumber(0);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => num1Down()}>-</button>
      {num1}
      <button onClick={() => num1Up()}>+</button>
      <br />
      <button onClick={() => num2Down()}>-</button>
      {num2}
      <button onClick={() => num2Up()}>+</button>
      <NumberRow baseNumber={0} />
    </div>
  );
}

对于可用性很重要考虑到您甚至可以使用额外的参数，例如 numUp 或 numDown 的金额