reactjs - 如何制作可重用的 useState 和 function？

Question

我正在尝试制作开关按钮，我想使用一个 useState 和一个功能来复制它。所以这是代码：

import React, { useState } from "react";

const SettingXY = () => {
  const [state, setState] = useState();

  const showMenu = e => {
    switch (e.currentTarget.id) {
      case "A":
        setState(1);
        break;
      case "B":
        setState(2);
        break;
      case "C":
        setState(3);
        break;
      case "D":
        setState(4);
        break;

      default:
        break;
    }
  };

  return (
    <div>
      {/* first  */}
      <button id="A" onClick={showMenu}>
        A setting
      </button>
      <button id="B" onClick={showMenu}>
        B setting
      </button>
      <button id="C" onClick={showMenu}>
        C setting
      </button>
      <button id="D" onClick={showMenu}>
        D setting
      </button>
      <div>
        {state === 1 && <div state={state}>This is A</div>}
        {state === 2 && <div state={state}>This is B</div>}
        {state === 3 && <div state={state}>This is C</div>}
        {state === 4 && <div state={state}>This is D</div>}
      </div>

      {/* second  */}
      <button id="A" onClick={showMenu}>
        A setting
      </button>
      <button id="B" onClick={showMenu}>
        B setting
      </button>
      <button id="C" onClick={showMenu}>
        C setting
      </button>
      <button id="D" onClick={showMenu}>
        D setting
      </button>
      <div>
        {state === 1 && <div state={state}>This is A</div>}
        {state === 2 && <div state={state}>This is B</div>}
        {state === 3 && <div state={state}>This is C</div>}
        {state === 4 && <div state={state}>This is D</div>}
      </div>
    </div>
  );
};

export default SettingXY;

两者同时发生变化。所以我不得不像这样使用重复的useState：

import React, { useState } from "react";

const SettingXY = () => {
  const [state, setState] = useState();
  const [state2, setState2] = useState();

  const showMenu = e => {
    switch (e.currentTarget.id) {
      case "A":
        setState(1);
        break;
      case "B":
        setState(2);
        break;
      case "C":
        setState(3);
        break;
      case "D":
        setState(4);
        break;

      default:
        break;
    }
  };
  const showMenu2 = e => {
    switch (e.currentTarget.id) {
      case "A":
        setState2(1);
        break;
      case "B":
        setState2(2);
        break;
      case "C":
        setState2(3);
        break;
      case "D":
        setState2(4);
        break;

      default:
        break;
    }
  };

  return (
    <div>
      {/* first  */}
      <button id="A" onClick={showMenu}>
        A setting
      </button>
      <button id="B" onClick={showMenu}>
        B setting
      </button>
      <button id="C" onClick={showMenu}>
        C setting
      </button>
      <button id="D" onClick={showMenu}>
        D setting
      </button>
      <div>
        {state === 1 && <div state={state}>This is A</div>}
        {state === 2 && <div state={state}>This is B</div>}
        {state === 3 && <div state={state}>This is C</div>}
        {state === 4 && <div state={state}>This is D</div>}
      </div>

      {/* second  */}
      <button id="A" onClick={showMenu2}>
        A setting
      </button>
      <button id="B" onClick={showMenu2}>
        B setting
      </button>
      <button id="C" onClick={showMenu2}>
        C setting
      </button>
      <button id="D" onClick={showMenu2}>
        D setting
      </button>
      <div>
        {state2 === 1 && <div state={state2}>This is A</div>}
        {state2 === 2 && <div state={state2}>This is B</div>}
        {state2 === 3 && <div state={state2}>This is C</div>}
        {state2 === 4 && <div state={state2}>This is D</div>}
      </div>
    </div>
  );
};

export default SettingXY;

但我想做的只是使用一个useState和一个功能。并使其干燥，所以我怎样才能使其可重复使用useState？

标签： reactjs

Answer 1

首先，您不需要设置 id 并通过 switch case 获取它，您只需像 setState(1) 等直接从状态传递值...如果您需要 showMenu，您可以传递 showMenu("一个”）...

对于您的问题，如果您使用一种状态，则意味着您正在收听此状态的任何更改，因此如果您必须组件/列表/项目取决于此状态，则将根据它重新渲染，这样，如果您是需要这样，一种状态是正确的，否则两种状态是正确的，否则一种状态是好的......

现在，您可以通过使状态对象嵌套值来处理您的情况，例如：

const [state, setState] = useState({ONE: {...}, TWO: {...}})

并根据您的情况，更新您的目标...

但是由于你的函数和你的代码是相等的，只有 diff 是 id，所以替换它是这样的：

  {/* first  */}
  <button onClick={() => setState(1) || showMenu("A")}>
    A setting
  </button>
  <button onClick={() => setState(2) || showMenu("B")}>
    B setting
  </button>
  <button onClick={() => setState(3) || showMenu("C")}>
    C setting
  </button>
  <button onClick={() => setState41) || showMenu("D")}>
    D setting
  </button>

注意：使用 setState 或 showMEnu...只是代码来解释您可以做什么...

通过此更新，第一组和第二组都将更新并显示正确的状态...